Tidadigi Logo

Tailwind CSS Grid Auto Rows

Lớp này chấp nhận nhiều giá trị trong tailwind CSS. Tất cả các thuộc tính được đề cập ở dạng lớp. Nó là một giải pháp thay thế cho thuộc tính CSS grid-auto-rows. Lớp này dùng để chỉ định kích thước cho các hàng của vùng chứa lưới được tạo ngầm.

Lớp này dùng các tiện ích để kiểm soát kích thước của các hàng lưới được tạo ngầm.

Các lớp Grid Auto Rows:

  1. auto-rows-auto
  2. auto-rows-min
  3. auto-rows-max
  4. auto-rows-fr

auto-rows-auto: Đây là giá trị mặc định. Kích thước được xác định ngầm dựa trên kích thước của vùng chứa.

Cú pháp:

<element class="auto-rows-auto">..</element>

Ví dụ:

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 Grid Auto Rows Class</b> 
        <div class ="m-8 p-8 grid bg-green-600 grid-cols-2 
                     grid-flow-row gap-4 auto-rows-auto">
            <div class = "p-4 bg-green-200">
                LiveScript Become JavaScript
            </div> 
            <div class = "p-4 bg-green-200">
                HyperText Markup language
                
            </div>  
            <div class = "p-4 bg-green-200">
                Bootstratp become replacement of CSS
            </div> 
            <div class = "p-4 bg-green-200">
                Cascading Style Sheet
            </div> 

        </div> 
    </body> 
</html>

Đầu ra:

tailwind-css-grid-auto-rows

auto-rows-min: Nó chỉ định kích thước tùy thuộc vào mục nhỏ nhất trong vùng chứa.

Cú pháp:

<element class="auto-rows-min">..</element>

Ví dụ:

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 Grid Auto Rows Class</b> 
        <div class ="m-8 p-8 grid bg-green-600 grid-cols-2 
                     grid-flow-row gap-4 auto-rows-min">
            <div class = "p-4 bg-green-200">
                LiveScript Become JavaScript
            </div> 
            <div class = "p-4 bg-green-200">
                HyperText Markup language
                
            </div>  
            <div class = "p-4 bg-green-200">
                Bootstratp become replacement of CSS
            </div> 
            <div class = "p-4 bg-green-200">
                Cascading Style Sheet
            </div> 

        </div> 
    </body> 
</html>

Đầu ra:

tailwind-css-grid-auto-rows

auto-rows-max: Nó chỉ định kích thước tùy thuộc vào mục lớn nhất trong vùng chứa.

Cú pháp:

<element class="auto-rows-max">..</element>

Ví dụ:

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 Grid Auto Rows Class</b> 
        <div class ="m-8 p-8 grid bg-green-600 grid-cols-2 
                     grid-flow-row gap-4 auto-rows-max">
            <div class = "p-4 bg-green-200">
                LiveScript Become JavaScript
            </div> 
            <div class = "p-4 bg-green-200">
                HyperText Markup language
                
            </div>  
            <div class = "p-4 bg-green-200">
                Bootstratp become replacement of CSS
            </div> 
            <div class = "p-4 bg-green-200">
                Cascading Style Sheet
            </div> 

        </div> 
    </body> 
</html>

Đầu ra:

tailwind-css-grid-auto-rows

auto-rows-fr: Nó chỉ định kích thước trong khoảng [min, max]. Lớn hơn hoặc bằng min, nhỏ hơn hoặc bằng max.

Cú pháp:

<element class="auto-rows-fr">..</element>

Ví dụ:

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 Grid Auto Rows Class</b> 
        <div class ="m-8 p-8 grid bg-green-600 grid-cols-2 
                     grid-flow-row gap-4 auto-rows-fr">
            <div class = "p-4 bg-green-200">
                LiveScript Become JavaScript
            </div> 
            <div class = "p-4 bg-green-200">
                HyperText Markup language
                
            </div>  
            <div class = "p-4 bg-green-200">
                Bootstratp become replacement of CSS
            </div> 
            <div class = "p-4 bg-green-200">
                Cascading Style Sheet
            </div> 

        </div> 
    </body> 
</html>

Đầu ra:

tailwind-css-grid-auto-rows
Auto Rows

Last Updated : 20/07/2025