Tidadigi Logo

Tailwind CSS Justify Items

Class này chấp nhận hai giá trị trong Tailwind CSS. Nó là một lựa chọn thay thế cho thuộc tính CSS justify-items. Class này dùng để kiểm soát cách các phần tử lưới được căn chỉnh theo trục inline.

Justify Items:

  • justify-items-auto
  • justify-items-start
  • justify-items-end
  • justify-items-center
  • justify-items-stretch 

justify-items-auto

Class này được dùng để tự động căn chỉnh các phần tử lưới trên trục inline.

Syntax:

<element class="justify-items-auto">...</element>

Example:

HTML 
<!DOCTYPE html> 
<html>
  
<head>     
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 
          rel="stylesheet"> 
</head> 

<body class="text-center"> 
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1> 
    <b>Tailwind CSS Justify Items Class</b> 
    <div id="main" class="grid justify-items-auto grid-cols-2"> 
        <div class="bg-green-500 rounded-lg m-4 h-12">1</div> 
        <div class="bg-green-500 rounded-lg m-4 h-12">2</div> 
        <div class="bg-green-500 rounded-lg m-4 h-12">3</div> 
        <div class="bg-green-500 rounded-lg m-4 h-12">4</div>
        <div class="bg-green-500 rounded-lg m-4 h-12">5</div> 
        <div class="bg-green-500 rounded-lg m-4 h-12">6</div>
    </div> 
</body> 

</html>

Output:

tailwind-css-justify-items

justify-items-start

Class này được dùng để căn chỉnh các phần tử lưới về phía đầu trục inline.

Syntax:

<element class="justify-items-start">...</element>

Example:

HTML 
<!DOCTYPE html> 
<html>
  
<head>    
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 
    rel="stylesheet"> 
</head> 

<body class="text-center"> 
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1> 
    <b>Tailwind CSS Justify Items Class</b> 
    <div id="main" class="grid justify-items-start grid-cols-2"> 
        <div class="bg-green-500 rounded-lg m-4 w-20 h-12">1</div> 
        <div class="bg-green-500 rounded-lg m-4 w-20 h-12">2</div> 
        <div class="bg-green-500 rounded-lg m-4 w-20 h-12">3</div> 
        <div class="bg-green-500 rounded-lg m-4 w-20 h-12">4</div>
        <div class="bg-green-500 rounded-lg m-4 w-20 h-12">5</div> 
        <div class="bg-green-500 rounded-lg m-4 w-20 h-12">6</div>
    </div> 
</body> 
</html>

Output:

tailwind-css-justify-items

justify-items-end

Class này được dùng để căn chỉnh các phần tử lưới về phía cuối trục inline của chúng.

Syntax:

<element class="justify-items-end">...</element>

Example:

HTML 
<!DOCTYPE html> 
<html>
  
<head>    
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 
          rel="stylesheet"> 
</head> 

<body class="text-center"> 
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1> 
    <b>Tailwind CSS Justify Items Class</b> 
    <div id="main" class="grid justify-items-end grid-cols-2"> 
        <div class="bg-green-500 rounded-lg m-4 w-20 h-12">1</div> 
        <div class="bg-green-500 rounded-lg m-4 w-20 h-12">2</div> 
        <div class="bg-green-500 rounded-lg m-4 w-20 h-12">3</div> 
        <div class="bg-green-500 rounded-lg m-4 w-20 h-12">4</div>
        <div class="bg-green-500 rounded-lg m-4 w-20 h-12">5</div> 
        <div class="bg-green-500 rounded-lg m-4 w-20 h-12">6</div>
    </div> 
</body> 

</html>

Output:

tailwind-css-justify-items

justify-items-center

Class này được dùng để căn chỉnh các phần tử lưới dọc theo trục inline.

Syntax:

<element class="jjustify-items-center">...</element>

Example:

HTML 
<!DOCTYPE html> 
<html>
  
<head>    
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 
     rel="stylesheet"> 
</head> 

<body class="text-center"> 
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1> 
    <b>Tailwind CSS Justify Items Class</b> 
    <div id="main" class="grid justify-items-center grid-cols-2"> 
        <div class="bg-green-500 rounded-lg m-4 w-20 h-12">1</div> 
        <div class="bg-green-500 rounded-lg m-4 w-20 h-12">2</div> 
        <div class="bg-green-500 rounded-lg m-4 w-20 h-12">3</div> 
        <div class="bg-green-500 rounded-lg m-4 w-20 h-12">4</div>
        <div class="bg-green-500 rounded-lg m-4 w-20 h-12">5</div> 
        <div class="bg-green-500 rounded-lg m-4 w-20 h-12">6</div>
    </div> 
</body> 

</html>

Output:

tailwind-css-justify-items

justify-items-stretch

Class này được dùng để kéo giãn các phần tử dọc theo trục inline.

Syntax:

<element class="justify-items-stretch">...</element>

Example:

HTML 
<!DOCTYPE html> 
<html>
  
<head>    
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 
          rel="stylesheet"> 
</head> 

<body class="text-center"> 
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1> 
    <b>Tailwind CSS Justify Items Class</b> 
    <div id="main" class="grid justify-items-stretch grid-cols-2"> 
        <div class="bg-green-500 rounded-lg m-4 h-12">1</div> 
        <div class="bg-green-500 rounded-lg m-4 h-12">2</div> 
        <div class="bg-green-500 rounded-lg m-4 h-12">3</div> 
        <div class="bg-green-500 rounded-lg m-4 h-12">4</div>
        <div class="bg-green-500 rounded-lg m-4 h-12">5</div> 
        <div class="bg-green-500 rounded-lg m-4 h-12">6</div>
    </div> 
</body> 

</html>

Output:

tailwind-css-justify-items
Last Updated : 20/07/2025