Tailwind CSS Classes

Tailwind CSS class .grid-rows-1 / .grid-rows-*

<div class="grid grid-rows-3 grid-flow-col gap-2">
  <div class="h-4 bg-teal-400"></div>
  <div class="h-4 bg-teal-400"></div>
  <div class="h-4 bg-teal-400"></div>
  <div class="h-4 bg-teal-400"></div>
  <div class="h-4 bg-teal-400"></div>
  <div class="h-4 bg-teal-400"></div>
</div>

Preview

Are you tired of writing HTML by hand?

CSS source

.grid-rows-1 { grid-template-rows: repeat(1, minmax(0, 1fr)); }
.grid-rows-2 { grid-template-rows: repeat(2, minmax(0, 1fr)); }
.grid-rows-3 { grid-template-rows: repeat(3, minmax(0, 1fr)); }
.grid-rows-4 { grid-template-rows: repeat(4, minmax(0, 1fr)); }
.grid-rows-5 { grid-template-rows: repeat(5, minmax(0, 1fr)); }
.grid-rows-6 { grid-template-rows: repeat(6, minmax(0, 1fr)); }
.grid-rows-none { grid-template-rows: none; }

More Tailwind CSS classes in Grid category

© 2024 Shuffle. All rights reserved.