Grid Columns

1 min read | Tailwind CSS Tutorial

⭐

Want the full learning experience?

Get structured courses, certificates, projects, and instructor support with LabsICT Pro.

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>