Tailwind CSS Classes

Tailwind CSS class .col-gap-0 / .col-gap-*

<div class="grid grid-cols-3 row-gap-2 col-gap-4">
  <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

.col-gap-0 { column-gap: 0; }
.col-gap-1 { column-gap: 0.25rem; }
.col-gap-2 { column-gap: 0.5rem; }
.col-gap-3 { column-gap: 0.75rem; }
.col-gap-4 { column-gap: 1rem; }
.col-gap-5 { column-gap: 1.25rem; }
.col-gap-6 { column-gap: 1.5rem; }
.col-gap-8 { column-gap: 2rem; }
.col-gap-10 { column-gap: 2.5rem; }
.col-gap-12 { column-gap: 3rem; }
.col-gap-16 { column-gap: 4rem; }
.col-gap-20 { column-gap: 5rem; }
.col-gap-24 { column-gap: 6rem; }
.col-gap-32 { column-gap: 8rem; }
.col-gap-40 { column-gap: 10rem; }
.col-gap-48 { column-gap: 12rem; }
.col-gap-56 { column-gap: 14rem; }
.col-gap-64 { column-gap: 16rem; }
.col-gap-px { column-gap: 1px; }

More Tailwind CSS classes in Grid category

© 2024 Shuffle. All rights reserved.