Tailwind CSS Grid Row Start / End

The row-start and row-end CSS properties allow you to set the starting and ending position of a grid item along the block (vertical) axis with respect to the grid cells.

Syntax

<div class="grid grid-cols-3 gap-4">
  <div class="row-start-2 row-end-4">Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
  <div>Item 5</div>
  <div>Item 6</div>
</div>

Example

In the above example, the row-start-2 and row-end-4 classes are used to set the starting and ending position of the first grid item. This will make it span across two rows, from row 2 to row 4, while the remaining items occupy only one cell.

Output

Explanation

The row-start and row-end properties define how many rows an item spans relative to the rows specified by grid-template-rows. By default, the grid property creates a grid with auto-sized rows.

Use

This CSS property is useful when you want to create complex layouts with rows spanning more than one cell. It can help you create elegant designs with fewer lines of code.

Important Points

• The row-start and row-end properties only work in grid layouts.
• The values for row-start and row-end can be an integer or a CSS keyword.
• Negative values can also be used to place the grid item counting from the end of the grid.

Summary

The row-start and row-end CSS properties provide a simple and effective way to set the starting and ending position of grid items along the block axis. This can be useful when creating complex layouts in Tailwind CSS.