Grid Template Columns

Defines the columns in a CSS Grid layout. This utility allows you to create complex, two-dimensional layouts with precise control over both rows and columns. Grid Template Columns sets up the horizontal tracks in your grid, defining how many columns you want and how they should size themselves. In Tailwind v4, grid utilities have enhanced support for modern features like subgrid and masonry layouts.

Flexbox & Grid1 variant4 examples

Official Docs Open Playground

Basic usage:

<div class="grid grid-cols-3 gap-4">
  <div class="bg-blue-100 p-4">Column 1</div>
  <div class="bg-blue-200 p-4">Column 2</div>
  <div class="bg-blue-300 p-4">Column 3</div>
</div>

Examples

Basic 3-column grid with equal width columns

<div class="grid grid-cols-3 gap-4">
  <div class="bg-blue-100 p-4">Column 1</div>
  <div class="bg-blue-200 p-4">Column 2</div>
  <div class="bg-blue-300 p-4">Column 3</div>
</div>

Edit in playground

12-column grid with items spanning multiple columns

<div class="grid grid-cols-12 gap-4">
  <div class="col-span-4 bg-green-100 p-4">Spans 4 columns</div>
  <div class="col-span-8 bg-green-200 p-4">Spans 8 columns</div>
  <div class="col-span-6 bg-green-300 p-4">Spans 6 columns</div>
  <div class="col-span-6 bg-green-400 p-4">Spans 6 columns</div>
</div>

Edit in playground

Advanced responsive grid layout that adapts across breakpoints

<!-- Responsive grid that changes based on screen size -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
  <div class="bg-white p-6 rounded-lg shadow-md">
    <h3 class="font-bold text-lg mb-2">Card 1</h3>
    <p>This grid responsively adapts from 1 column on mobile, to 4 columns on extra large screens.</p>
  </div>
  <!-- More cards... -->
  <div class="bg-white p-6 rounded-lg shadow-md">
    <h3 class="font-bold text-lg mb-2">Card 2</h3>
    <p>Each card takes full width on mobile, half width on medium screens, and so on.</p>
  </div>
  <div class="bg-white p-6 rounded-lg shadow-md">
    <h3 class="font-bold text-lg mb-2">Card 3</h3>
    <p>This creates a responsive card grid that works across all devices.</p>
  </div>
  <div class="bg-white p-6 rounded-lg shadow-md">
    <h3 class="font-bold text-lg mb-2">Card 4</h3>
    <p>No media queries needed - just Tailwind's responsive utilities.</p>
  </div>
</div>

Edit in playground

Complex layout with different column spans at various breakpoints

<!-- Complex layout with mixed column sizes -->
<div class="grid grid-cols-6 gap-4">
  <div class="col-span-6 md:col-span-4 bg-purple-100 p-4 rounded-lg">
    <h2 class="font-bold mb-2">Main Content</h2>
    <p>This area spans 4 of 6 columns on medium screens and up, but full width on mobile.</p>
  </div>
  <div class="col-span-6 md:col-span-2 bg-purple-200 p-4 rounded-lg">
    <h2 class="font-bold mb-2">Sidebar</h2>
    <p>This area spans 2 of 6 columns on medium screens and up, but full width on mobile.</p>
  </div>
  <div class="col-span-3 md:col-span-2 bg-purple-300 p-4 rounded-lg">
    <h3 class="font-bold">Section 1</h3>
    <p>Half width on mobile, 2/6 on desktop.</p>
  </div>
  <div class="col-span-3 md:col-span-2 bg-purple-300 p-4 rounded-lg">
    <h3 class="font-bold">Section 2</h3>
    <p>Half width on mobile, 2/6 on desktop.</p>
  </div>
  <div class="col-span-6 md:col-span-2 bg-purple-300 p-4 rounded-lg">
    <h3 class="font-bold">Section 3</h3>
    <p>Full width on mobile, 2/6 on desktop.</p>
  </div>
</div>

Edit in playground

Live Preview

Try the Grid Template Columns utility with different values

Open Interactive Playground

Variants

Specifies the number of columns in the grid. grid-cols-3 creates three equal-width columns. grid-cols-none removes any explicitly defined columns. You can also use arbitrary values with grid-cols-[200px_1fr_2fr] for custom column patterns.

123456789101112none