Tailwind Grid Auto Rows

The tailwind grid-auto-rows utility class allows you to control the height of grid rows in a grid container when they don't have an explicit height defined. With Tailwind's grid-auto-rows class, you can easily set a default height for the rows in a grid layout.

Applying Tailwind Grid Auto Rows

To apply grid auto rows to a grid container, you can use the tailwind grid-auto-rows-{size} utility class, where {size} represents the desired height of the grid rows. The {size} can be one of the predefined sizes in Tailwind CSS, such as grid-auto-rows-auto, grid-auto-rows-1, grid-auto-rows-2, or you can customize the height using the sizing scale.

<div class="grid grid-cols-3 grid-auto-rows-1/3">
  <div class="bg-yellow-500">Element 1</div>
  <div class="bg-yellow-500">Element 2</div>
  <div class="bg-yellow-500">Element 3</div>
</div>

Preview

In the above example, a grid container with 3 columns is created using grid-cols-3. The grid-auto-rows-1/3 class is applied to set the height of the grid rows to 1/3 of the container height.

Responsive Tailwind Grid Auto Rows

Tailwind CSS allows you to apply grid auto rows responsively at different breakpoints. To use responsive tailwind grid auto rows classes, you can append the breakpoint prefix to the grid auto rows class. For example, md:grid-auto-rows-1/2 sets the height of the grid rows to 1/2 of the container height starting from the medium breakpoint and above. Here's an example:

<div class="grid grid-cols-2 md:grid-cols-3 grid-auto-rows-1/2 md:grid-auto-rows-1/3">
  <div class="bg-gray-200">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 tailwind grid-auto-rows-1/2 class sets the height of the grid rows to 1/2 of the container height by default, and themd:grid-auto-rows-1/3 class sets the height to 1/3 of the container height starting from the medium breakpoint and above.

Tailwind Grid Auto Rows Class Table

Windframe Tailwind blocks

Team