This class accepts more than one value in tailwind CSS and all the properties are covered as in class form. It is the alternative of CSS grid-template-row property in CSS. It is used to set the number of rows and size of the rows of the grid, here we will do the same but for fast development of front-end. The number of rows is set by the number of values given to this class.
Grid Template Rows:
- grid-rows-1: Each row concedes only one row.
- grid-rows-2: Each row concedes only two rows.
- grid-rows-3: Each row concedes only three rows.
- grid-rows-4: Each row concedes only four rows.
- grid-rows-5: Each row concedes only five rows.
- grid-rows-6: Each row concedes six rows.
- grid-rows-none: Does not follow the grid-row property.
Syntax:
<element class="grid grid-rows-number"> Contents... </element>
Example 1:
HTML
<!DOCTYPE html> <head>
<title>Tailwind grid-rows Class</title>
<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-rows Class</b>
<div id="main" class="grid grid-rows-3 grid-flow-col">
<div class="bg-green-500 rounded-lg m-4 h-12">1</div>
<div class="bg-green-500 rounded-lg m-4 h-12">2</div>
<div class="bg-green-500 rounded-lg m-4 h-12">3</div>
<div class="bg-green-500 rounded-lg m-4 h-12">4</div>
<div class="bg-green-500 rounded-lg m-4 h-12">5</div>
<div class="bg-green-500 rounded-lg m-4 h-12">6</div>
</div>
</body>
</html>
|
Output:
Example 2:
HTML
<!DOCTYPE html> <head>
<title>Tailwind grid-rows Class</title>
<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-rows Class</b>
<div id="main" class="grid grid-rows-2 grid-flow-col">
<div class="bg-green-500 rounded-lg m-4 h-12">1</div>
<div class="bg-green-500 rounded-lg m-4 h-12">2</div>
<div class="bg-green-500 rounded-lg m-4 h-12">3</div>
<div class="bg-green-500 rounded-lg m-4 h-12">4</div>
<div class="bg-green-500 rounded-lg m-4 h-12">5</div>
<div class="bg-green-500 rounded-lg m-4 h-12">6</div>
</div>
</body>
</html>
|
Output: