Skip to content
Related Articles

Related Articles

Tailwind CSS Grid Auto Rows
  • Last Updated : 22 Mar, 2021

This class accepts more than one value in tailwind CSS in which all the properties are covered as in class form. It is the alternative to the CSS grid-auto-rows property. This class is used to specify the size for the rows of implicitly generated grid containers. This class is used to utilities to control the size implicitly-created grid rows.

Grid Auto Rows classes:

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

auto-rows-auto: It is the default value. The size is determined implicitly according to the size of the container.

Syntax:

<element class="auto-rows-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 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

Output:

auto-rows-min: It specifies the size depending on the smallest item in the container.

Syntax:

<element class="auto-rows-min">..</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 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

Output:

auto-rows-max: It specifies the size depending on the largest item in the container.



Syntax:

<element class="auto-rows-max">..</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 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

Output:

auto-rows-fr: It specifies the size in the range of [min, max] greater than or equal to min and less than or equal to max.

Syntax:

<element class="auto-rows-fr">..</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 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>

Output:

Auto Rows

My Personal Notes arrow_drop_up
Recommended Articles
Page :