Tailwind CSS Grid Auto Rows
Last Updated :
23 Mar, 2022
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:
- auto-rows-auto
- auto-rows-min
- auto-rows-max
- 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 =
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 =
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 =
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 =
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
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...