Tailwind CSS Classes

Tailwind CSS class .row-span-1 / .row-span-*

<div class="grid grid-cols-3 gap-4">
  <div class="row-span-3 col-span-1 bg-teal-400"></div>
  <div class="row-span-1 col-span-1 bg-teal-400"></div>
  <div class="row-span-2 col-span-2 bg-teal-400"></div>
  <div class="row-span-1 col-span-1 bg-teal-400"></div>
  <div class="row-span-2 col-span-1 bg-teal-400"></div>
  <div class="row-span-3 col-span-1 bg-teal-400"></div>
</div>

Preview

Are you tired of writing HTML by hand?

CSS source

.row-auto { grid-row: auto; }
.row-span-1 { grid-row: span 1 / span 1; }
.row-span-2 { grid-row: span 2 / span 2; }
.row-span-3 { grid-row: span 3 / span 3; }
.row-span-4 { grid-row: span 4 / span 4; }
.row-span-5 { grid-row: span 5 / span 5; }
.row-span-6 { grid-row: span 6 / span 6; }

More Tailwind CSS classes in Grid category

© 2024 Shuffle. All rights reserved.