Tailwind Grid Template Columns Guide

Tailwind CSS provides powerful utilities for working with CSS Grid. If you want to create custom column widths like grid-template-columns: 20% 80%, this guide will show you how to achieve that using Tailwind.

Setting Custom Column Widths

In vanilla CSS, you might write:

.grid-container {
  display: grid;
  grid-template-columns: 20% 80%;
}

In Tailwind, you can achieve this using arbitrary values:

<div class="grid grid-cols-[20%_80%]">
  <div class="bg-blue-200">1</div>
  <div class="bg-green-200">2</div>
</div>

Fixed Width Columns

If you want a fixed width for one column and let the other grow:

<div class="grid grid-cols-[200px_auto]">
  <div class="bg-red-200">Fixed 200px</div>
  <div class="bg-yellow-200">Auto width</div>
</div>

Using Grid Column Span

You can also use col-span to control how much space an element takes:

<div class="grid grid-cols-5 gap-4">
  <div class="col-span-1 bg-purple-200">1</div>
  <div class="col-span-4 bg-purple-300">2</div>
</div>

Using Flexbox as an Alternative

If you prefer flexbox, you can achieve a similar layout:

<div class="flex">
  <div class="w-1/5 bg-indigo-200">1</div>
  <div class="w-4/5 bg-indigo-300">2</div>
</div>

FAQs

1. Can I use fractions instead of percentages?

Yes! Tailwind allows using fractions like grid-cols-[1fr_2fr] for proportional sizing.

2. What if I need responsive grids?

Use Tailwind’s responsive prefixes, such as:

<div class="grid grid-cols-1 md:grid-cols-[30%_70%]">
  <div class="bg-gray-200">Left</div>
  <div class="bg-gray-400">Right</div>
</div>

3. Does Tailwind support repeat() for grids?

No, but you can manually specify columns using grid-cols-[repeat(3,_1fr)].