Grid Columns

Grid columns define how many columns your grid has and how they're sized. Tailwind provides utilities from grid-cols-1 to grid-cols-12, plus the ability to define arbitrary column counts.

Column counts

<div class="grid grid-cols-1 gap-4">1 column</div>
<div class="grid grid-cols-2 gap-4">2 columns</div>
<div class="grid grid-cols-3 gap-4">3 columns</div>
<div class="grid grid-cols-4 gap-4">4 columns</div>
<div class="grid grid-cols-6 gap-4">6 columns</div>
<div class="grid grid-cols-12 gap-4">12 columns</div>
    

Responsive columns

The real power of grid columns is responsive layouts. Start with one column on mobile and add more as the screen gets wider.

<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
  <div class="bg-white rounded-lg shadow p-4">1</div>
  <div class="bg-white rounded-lg shadow p-4">2</div>
  <div class="bg-white rounded-lg shadow p-4">3</div>
  <div class="bg-white rounded-lg shadow p-4">4</div>
</div>
    

Arbitrary column counts

Need 5 columns or 7 columns? Use the arbitrary value syntax.

<div class="grid [grid-template-columns:repeat(5,1fr)] gap-4">
  <div>5 equal columns</div>
</div>
    

Mixed column sizes

Combine fixed and flexible columns for layouts with a sidebar and main content area.

<div class="grid grid-cols-[250px_1fr] gap-6">
  <aside class="bg-gray-100 p-4">Fixed sidebar</aside>
  <main class="bg-white p-4">Flexible main content</main>
</div>