Tailwind CSS Grid Row Start / End
In tailwind CSS, this class takes several values. All of the attributes are covered in the form of a class. In CSS, it's an alternative to the grid-row attribute. It's a term that refers to the number of properties that Tailwind CSS provides for designing grid structures and controlling grid item placement. It can change the layout of grid items regardless of their source order, allowing you to move grid items around to fit different contexts without having to edit the underlying markup. The number of values assigned to this class determines the number of rows.
Grid Rows Start / End
- row-auto
- row-span-1
- row-span-2
- row-span-3
- row-span-4
- row-span-5
- row-span-6
- row-span-7
- row-span-8
- row-span-9
- row-span-10
- row-span-11
- row-span-12
- row-span-full
- row-start-1
- row-start-2
- row-start-3
- row-start-4
- row-start-5
- row-start-6
- row-start-7
- row-start-8
- row-start-9
- row-start-10
- row-start-11
- row-start-12
- row-start-13
- row-start-auto
- row-end-1
- row-end-2
- row-end-3
- row-end-4
- row-end-5
- row-end-6
- row-end-7
- row-end-8
- row-end-9
- row-end-10
- row-end-11
- row-end-12
- row-end-13
- row-end-auto
Spanning rows (row-span): This class will cover the span area; the number after the class will hold the area of a span; we all know that there are 12 grid rows or 12 grid spans.
Syntax:
<element class="row-span-number"> Contents... </element>Parameter: As noted before and as described below, this class accepts only one parameter:-
Number: It keeps track of how many spans a grid row will require.
Example:
<!DOCTYPE html>
<head>
<title>row-span 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>row-span Class - Tailwind CSS </b>
<div id="main" class="m-8 grid grid-row-3 grid-flow-col gap-1">
<div class="bg-red-300 rounded-lg">1</div>
<div class="bg-red-300 rounded-lg">2</div>
<div class="bg-red-300 rounded-lg">3</div>
<div class="bg-red-500 row-span-2 rounded-lg">4</div>
<div class="bg-red-300 rounded-lg">5</div>
<div class="bg-red-500 row-span-3 rounded-lg">6</div>
</div>
</body>
</html>
Output:
Starting and ending lines (Row-start|end): This class is used to make an element start or end at the nth grid line. To span, a specified number of columns, combine these with the row-span-number utilities.
This class can be combined with the above-mentioned class (Spanning columns (row-span)).
Syntax
<element class="row-start|end-number">..</element>Parameter: This class also has only one parameter, as noted before and defined below:
Number: The start or end position of the grid row or normal row is defined by this parameter.
Example:
<!DOCTYPE html>
<head>
<title>row-start|end 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>row-start|end Class - Tailwind CSS </b>
<div id="main" class="m-8 grid grid-row-4
grid-flow-col gap-1 ">
<div class="bg-red-500 row-start-2 row-span-2
rounded-lg">1</div>
<div class="bg-red-300 rounded-lg">2</div>
<div class="bg-red-300 rounded-lg">3</div>
<div class="bg-red-500 row-start-2 col-end-4
rounded-lg">4</div>
<div class="bg-red-300 rounded-lg">5</div>
<div class="bg-red-300 rounded-lg">6</div>
<div class="bg-red-300 rounded-lg">7</div>
<div class="bg-red-500 row-start-2 row-span-3
rounded-lg">8</div>
</div>
</body>
</html>
Output:
