CSS Grid in Tailwind

Tailwind's grid-cols-N defines columns. Spanning and placement classes control cell size. No need to write grid-template-columns manually for standard layouts.

Basic grid

<div class="grid grid-cols-3 gap-6">
  <div class="bg-gray-100 p-4 rounded">Card 1</div>
  <div class="bg-gray-100 p-4 rounded">Card 2</div>
  <div class="bg-gray-100 p-4 rounded">Card 3</div>
</div>

Spanning cells

<div class="grid grid-cols-4 gap-4">
  <div class="col-span-3 bg-blue-50 p-4">Wide cell</div>
  <div class="col-span-1 bg-gray-50 p-4">Narrow</div>
  <div class="col-span-2 bg-green-50 p-4">Half width</div>
  <div class="col-span-2 bg-yellow-50 p-4">Half width</div>
</div>

Custom template with arbitrary values

<div class="grid grid-cols-[repeat(auto-fill,minmax(200px,1fr))] gap-4">
  <div>Item</div>
  <div>Item</div>
</div>

Tailwind supports arbitrary values inside brackets. Use this for patterns the predefined scale doesn't cover. The built-in scale goes up to grid-cols-12.