Tailwind CSS Grid Template Rows
In tailwind CSS, this class accepts multiple values and all properties are covered in class form. It's the CSS grid-template-row property's replacement. It is used to set the number of rows and the size of the grid's rows. The number of values assigned to this class determines the number of rows.
Grid Template Rows
The grid templates rows are classified as:
- grid-rows-1: Each row only gives up one row.
- grid-rows-2: Only two rows are conceded each row.
- grid-rows-3: Only three rows are conceded each row.
- grid-rows-4: Only four rows are conceded each row.
- grid-rows-5: Only five rows are conceded each row.
- grid-rows-6: Six rows are conceded each row.
- gird-rows-none: The grid-row attribute is ignored (does not follow).
Syntax:
<element class="grid grid-rows-number"> Contents... </element>
Example: 1
<!DOCTYPE html>
<head>
<title>grid-rows Class of Tailwind </title>
<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-rows Class - Tailwind CSS </b>
<div id="main" class="grid grid-rows-3 grid-flow-col">
<div class="bg-red-500 rounded-lg m-4 h-12">1</div>
<div class="bg-red-500 rounded-lg m-4 h-12">2</div>
<div class="bg-red-500 rounded-lg m-4 h-12">3</div>
<div class="bg-red-500 rounded-lg m-4 h-12">4</div>
<div class="bg-red-500 rounded-lg m-4 h-12">5</div>
<div class="bg-red-500 rounded-lg m-4 h-12">6</div>
</div>
</body>
</html>
Output:
Example: 2
<!DOCTYPE html>
<head>
<title>grid-rows Class of Tailwind </title>
<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-rows Class - Tailwind CSS </b>
<div id="main" class="grid grid-rows-2 grid-flow-col">
<div class="bg-red-500 rounded-lg m-4 h-12">1</div>
<div class="bg-red-500 rounded-lg m-4 h-12">2</div>
<div class="bg-red-500 rounded-lg m-4 h-12">3</div>
<div class="bg-red-500 rounded-lg m-4 h-12">4</div>
<div class="bg-red-500 rounded-lg m-4 h-12">5</div>
<div class="bg-red-500 rounded-lg m-4 h-12">6</div>
</div>
</body>
</html>
Output:
