Open In App

Tailwind CSS Grid Auto Rows

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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



Last Updated : 23 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads