Tailwind CSS Grid Auto Rows
In tailwind CSS, this class takes multiple values and covers all of the properties in class form. It's a replacement for the grid-auto-rows CSS attribute. The size of the rows of implicitly produced grid containers is specified using this class. This class is used to manage the size of grid rows that are formed implicitly.
Grid Auto Rows classes
- auto-rows-auto
- auto-rows-min
- auto-rows-max
- auto-rows-fr
auto-rows-auto
It is the default setting. The size is implicitly determined by the container's dimensions.
Syntax
<element class="auto-rows-auto">..</element>Example:
<!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-red-600 text-5xl font-bold">
Tutorial and Example
</h1>
<b>Grid Auto Rows Class - Tailwind CSS </b>
<div class ="m-8 p-8 grid bg-red-600 grid-cols-2
grid-flow-row gap-4 auto-rows-auto">
<div class = "p-4 bg-red-200">
Cascading Style Sheet
</div>
<div class = "p-4 bg-red-200">
HyperText Markup language
</div>
<div class = "p-4 bg-red-200">
Bootstratp become replacement of CSS
</div>
<div class = "p-4 bg-red-200">
LiveScript Become JavaScript
</div>
</div>
</body>
</html>
Output:
auto-rows-min
It determines the size based on the container's smallest item.
Syntax
<element class="auto-rows-min">..</element>Example:
<!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-red-600 text-5xl font-bold">
Tutorial and Example
</h1>
<b>Grid Auto Rows Class - Tailwind CSS </b>
<div class ="m-8 p-8 grid bg-red-600 grid-cols-2
grid-flow-row gap-4 auto-rows-min">
<div class = "p-4 bg-red-200">
HyperText Markup language
</div>
<div class = "p-4 bg-red-200">
Bootstratp become replacement of CSS
</div>
<div class = "p-4 bg-red-200">
LiveScript Become JavaScript
</div>
<div class = "p-4 bg-red-200">
Cascading Style Sheet
</div>
</div>
</body>
</html>
Output:
auto-rows-max
It determines the size based on the container's largest item.
Syntax
<element class="auto-rows-max">..</element>Example:
<!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-red-600 text-5xl font-bold">
Tutorial and Example
</h1>
<b>Grid Auto Rows Class - Tailwind CSS </b>
<div class ="m-8 p-8 grid bg-red-600 grid-cols-2
grid-flow-row gap-4 auto-rows-max">
<div class = "p-4 bg-red-200">
LiveScript Become JavaScript
</div>
<div class = "p-4 bg-red-200">
Cascading Style Sheet
</div>
<div class = "p-4 bg-red-200">
HyperText Markup language
</div>
<div class = "p-4 bg-red-200">
Bootstratp become replacement of CSS
</div>
</div>
</body>
</html>
Output:
auto-rows-fr
-It defines a size that is larger than or equal to min and less than or equal to the max in the range [min, max].
Syntax
<element class="auto-rows-fr">..</element>Example:
<!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-red-600 text-5xl font-bold">
Tutorial and Example
</h1>
<b>Grid Auto Rows Class - Tailwind CSS </b>
<div class ="m-8 p-8 grid bg-red-600 grid-cols-2
grid-flow-row gap-4 auto-rows-fr">
<div class = "p-4 bg-red-200">
LiveScript Become JavaScript
</div>
<div class = "p-4 bg-red-200">
HyperText Markup language
</div>
<div class = "p-4 bg-red-200">
Bootstratp become replacement of CSS
</div>
<div class = "p-4 bg-red-200">
Cascading Style Sheet
</div>
</div>
</body>
</html>
Output:
