Last updated: 76 May 2024

Tailwind CSS Grid Row Start/End

The tailwind grid-row-{start/end} utility classes allows you to control the starting and ending positions of grid items within a grid container along the vertical axis.


Tailwind Grid Row Start/End

The tailwind grid-row-{start/end} utility classes allows you to control the starting and ending positions of grid items within a grid container along the vertical axis. With Tailwind's grid-row-start and grid-row-end classes, you can easily define the placement of grid items within a grid layout.

Applying Tailwind Grid Row Start/End

To apply row start and end positions to a grid item, you can use the tailwind row-{start/end}-{line} utility classes, where {start/end} represents the desired start and end positions, and {line} represents the line number or name of the grid track.

html
<div class="h-64 grid grid-rows-3 grid-flow-col gap-4">
<div class="bg-blue-500 row-start-1 row-end-2">Item 1</div>
<div class="bg-blue-500">Item 2</div>
<div class="bg-blue-500 row-span-2">Item 3</div>
</div>

Preview

Item 1
items 2
items 3

Responsive Tailwind Grid Row Start/End

Tailwind CSS allows you to apply row start and end positions responsively at different breakpoints. To use responsive tailwind grid row start/end classes, you can append the breakpoint prefix to the utility classes. For example, md:grid-row-start-2 sets the start position to the second row starting from the medium breakpoint and above. Here's an example:

html
<div class="grid grid-cols-2 md:grid-cols-3">
<div class="bg-gray-200 md:grid-row-start-2 md:grid-row-end-4">Item 1</div>
<div class="bg-gray-200">Item 2</div>
<div class="bg-gray-200">Item 3</div>
</div>

In the above example, a grid container with 2 columns by default (grid-cols-2) and 3 columns starting from the medium breakpoint and above (md:grid-cols-3) is created. The md:grid-row-start-2 class is applied to the first grid item (Item 1) to specify that it should start at the second row from the medium breakpoint, and the md:grid-row-end-4 class is used to specify that it should end at the fourth row.

Tailwind Grid Row start/end Class Table

ClassProperties
row-autogrid-row: auto;
row-span-1grid-row: span 1 / span 1;
row-span-2grid-row: span 2 / span 2;
row-span-3grid-row: span 3 / span 3;
row-span-4grid-row: span 4 / span 4;
row-span-5grid-row: span 5 / span 5;
row-span-6grid-row: span 6 / span 6;
row-span-fullgrid-row: 1 / -1;
row-start-1grid-row-start: 1;
row-start-2grid-row-start: 2;
row-start-3grid-row-start: 3;
row-start-4grid-row-start: 4;
row-start-5grid-row-start: 5;
row-start-6grid-row-start: 6;
row-start-7grid-row-start: 7;
row-start-autogrid-row-start: auto;
row-end-1grid-row-end: 1;
row-end-2grid-row-end: 2;
row-end-3grid-row-end: 3;
row-end-4grid-row-end: 4;
row-end-5grid-row-end: 5;
row-end-6grid-row-end: 6;
row-end-7grid-row-end: 7;
row-end-autogrid-row-end: auto;

Windframe Tailwind blocks

Team

Windframe is a drag and drop builder for rapidly building tailwind css websites and UIs

Start building stunning tailwind UIs! 

Build from scratch or select prebuilt tailwind templates