Tailwind CSS Classes

Tailwind CSS class .col-end-1 / .col-end-*

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

Preview

Are you tired of writing HTML by hand?

CSS source

.col-end-1 { grid-column-end: 1; }
.col-end-2 { grid-column-end: 2; }
.col-end-3 { grid-column-end: 3; }
.col-end-4 { grid-column-end: 4; }
.col-end-5 { grid-column-end: 5; }
.col-end-6 { grid-column-end: 6; }
.col-end-7 { grid-column-end: 7; }
.col-end-8 { grid-column-end: 8; }
.col-end-9 { grid-column-end: 9; }
.col-end-10 { grid-column-end: 10; }
.col-end-11 { grid-column-end: 11; }
.col-end-12 { grid-column-end: 12; }
.col-end-13 { grid-column-end: 13; }
.col-end-auto { grid-column-end: auto; }

More Tailwind CSS classes in Grid category

© 2024 Shuffle. All rights reserved.