Grid Row Start & End In Tailwind CSS
In this article, we will discuss Grid row start and end classes in Tailwind CSS and how they can be used to define the starting and ending positions of a grid item within a row.
The Grid Row Start/End utility classes in Tailwind CSS provide a way to define the start and end positions of grid items in a grid container along the vertical axis.
These classes work by specifying the row number or name where the grid item should start or end.
In a similar manner to Grid Column Start/End classes, Grid Row Start/End classes can also be combined to control grid item placement.
Table Of Content-
Grid Row Start / End
| Classes | Overview |
| row-auto | This class can be used to set the height of grid rows to be automatically determined by the height of their content. |
| row-span-1 | The grid item using this class will occupy a single row in the grid. |
| row-span-2 | Grid items using this class will occupy two rows. |
| row-span-3 | This class will allow a grid item to occupy three rows. |
| row-span-4 | Four rows in the grid will be occupied by an item with this class. |
| row-span-5 | When using this class, each grid item will occupy five rows. |
| row-span-6 | This class will fill six rows of the grid. |
| row-span-7 | Using this class, a grid item will occupy seven rows. |
| row-span-8 | This class occupies eight rows for each grid item. |
| row-span-9 | Nine rows will be occupied by each grid item when using this class. |
| row-span-10 | Element using this class occupies ten rows for each grid item. |
| row-span-11 | Using this class, each grid item occupies eleven rows. |
| row-span-12 | Using this class, grid items will take up twelve rows. |
| row-span-full | An element with this class occupies all the rows in a grid container. |
| row-start-1 | In this case, the starting grid line of an element is specified as the first row line within a grid container. |
| row-start-2 | This specifies the second row line within a grid container to be the starting grid line of an element. |
| row-start-3 | An element’s starting grid line within a grid container corresponds to the third row line. |
| row-start-4 | When this class is used, the starting grid line of an element is the fourth row line of a grid container. |
| row-start-5 | You can use this class to start a grid item in the fifth row. |
| row-start-6 | Using this class, the first row line of the grid container is specified as the starting grid line of an element. |
| row-start-7 | This class can be used to start a grid item in the seventh row. |
| row-start-8 | Using this class, you can start a grid item in the eighth row. |
| row-start-9 | If you want to start a grid item in the ninth row, you can use this class. |
| row-start-10 | This class enables you to start a grid item in the tenth row. |
| row-start-11 | It is possible to use this class to start a grid item in the eleventh row. |
| row-start-12 | This class ensures that the twelfth row line is the starting grid line of an element in a grid container. |
| row-start-13 | Using this class, an element in a grid container starts with the thirteenth row line. |
| row-start-auto | Using this class, grid items are positioned in the first available row based on the row template. |
| row-end-1 | Used to set the ending line of the item to be the first grid line of the row. |
| row-end-2 | Specifies the second grid line of the row as the ending line of an item. |
| row-end-3 | Sets the third grid line in the row as the ending line of the item. |
| row-end-4 | This class is used to set a row’s fourth grid line as the item’s ending line. |
| row-end-5 | This class sets the ending grid line of the item as the fifth grid line. |
| row-end-6 | The ending line of the item should be the sixth grid line of the row. |
| row-end-7 | It is used for setting the item’s ending line as the seventh row grid line. |
| row-end-8 | The ending line of an item is set as the eighth grid line of the row. |
| row-end-9 | Grid items using this class end at row nine. |
| row-end-10 | The grid item using this class ends in the tenth row. |
| row-end-11 | In this class, the eleventh row is specified as the ending row. |
| row-end-12 | To specify the twelfth row as the ending row, use this class. |
| row-end-13 | By using this class, you can specify that the thirteenth row is the ending row. |
| row-end-auto | As a result of using this class, the grid item will end at the end of the row. |
Spanning rows (row-span)
Specifies the number of rows that an element should span in a grid container.
Syntax
<element class="row-span-number"> </element>
The following example is used to demonstrate the row-span utility in Tailwind:
Example:
<!DOCTYPE html>
<html><head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="text-center">
<h1 class="text-gray-600 text-2xl font-semibold">
MrExamples
</h1>
<p class="font-medium my-2">Using row-span class in Tailwind CSS</p>
<div id="main" class="m-8 grid grid-row-5 grid-flow-col gap-1">
<div class="bg-gray-300 row-span-5 rounded-lg">row-span-5</div>
<div class="bg-gray-300 row-span-1 rounded-lg">row-span-1</div>
<div class="bg-gray-300 row-span-4 rounded-lg">row-span-4</div>
<div class="bg-gray-300 row-span-3 rounded-lg">row-span-3</div>
<div class="bg-gray-300 row-span-1 rounded-lg">row-span-1</div>
<div class="bg-gray-300 row-span-2 rounded-lg">row-span-2</div>
</div>
</body>
</html>
Starting and ending lines (row-start|end)
This is used to set the starting and ending positions of a grid item in the vertical direction (along the rows) in a grid container.
Syntax
<element class="row-start-number"> </element>
or
<element class="row-end-number"> </element>
Here is a brief example covering the row-start/end utility classes alongside row-span in Tailwind:
Example:
<!DOCTYPE html>
<html><head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="text-center">
<h1 class="text-gray-600 text-2xl font-semibold">
MrExamples
</h1>
<p class="font-medium my-2">Using row-span class in Tailwind CSS</p>
<div id="main" class="m-8 grid grid-row-5 grid-flow-col gap-1">
<div class="bg-gray-300 row-start-2 row-span-2 rounded-lg">row-start-2 row-span-2</div>
<div class="bg-gray-300 row-start-2 row-end-4 rounded-lg">row-start-2 row-end-4</div>
<div class="bg-gray-300 row-span-4 row-end-4 rounded-lg">row-span-4 row-end-4</div>
<div class="bg-gray-300 row-start-1 row-span-3 rounded-lg">row-start-1 row-span-3</div>
<div class="bg-gray-300 row-start-1 row-end-3 rounded-lg">row-start-1 row-end-3</div>
<div class="bg-gray-300 row-start-3 row-end-4 rounded-lg">row-start-3 row-end-4</div>
</div>
</body>
</html>
In conclusion, Grid row start and row end classes in Tailwind provides a simple and flexible way to specify the starting and ending positions of a grid item within a row.
By now, you have gained knowledge on how to effectively apply grid row start and end properties in Tailwind.
We value your feedback.
+1
+1
+1
+1
+1
+1
+1
