F flexr.dev

Layout Recipe

Build a 3-Column Grid with Tailwind CSS

'grid grid-cols-3 gap-6' creates three equal-width columns ('repeat(3, minmax(0, 1fr))' under the hood) with consistent gutters in both directions. Children flow into cells automatically, left to right, wrapping to a new row every three items — no manual row management needed. The 'minmax(0, 1fr)' Tailwind generates is important: it lets long content shrink instead of blowing out the column width.

The playground below is pre-configured with this exact layout — tweak any control to explore, then copy the Tailwind or vanilla CSS from the exporter.

Live Preview

Current Layout:

grid grid-cols-3 with a gap

grid grid-cols-3 gap-6 creates three equal-width columns and fills them left to right, wrapping to a new row every third item. Under the hood Tailwind generates repeat(3, minmax(0, 1fr)), so the columns share the width evenly.

Tailwind 
<div class="grid grid-cols-3 gap-6">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>
Vanilla CSS 
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}

Make it responsive

Three columns are too tight on phones. Start with one column and step up at breakpoints: grid-cols-1 sm:grid-cols-2 lg:grid-cols-3. Each prefix only changes the column count at that width, and the gap stays consistent throughout.

Tailwind 
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
  ...
</div>

Spanning cells and the minmax(0, 1fr) trick

Make one cell wider with col-span-2. And if a long word or a wide image ever blows a column out, that is exactly what the minmax(0, 1fr) Tailwind emits prevents — the 0 minimum lets a column shrink below its content size instead of overflowing. Add min-w-0 to a stubborn child if text still refuses to wrap.

Common mistakes

Using flex for strict equal columns. Flex sizes to content unless you add basis utilities; grid columns are equal by default.

Skipping responsive prefixes. Three columns on a phone are unreadable — start at grid-cols-1.

A child overflowing its track. Add min-w-0 so long content can shrink and wrap.

Frequently asked questions

How do I make a 3 column grid in Tailwind?
Use grid grid-cols-3 gap-6 on the container; children flow into three equal columns automatically.
How do I make a 3 column grid responsive?
Use grid-cols-1 on mobile and add breakpoint prefixes like sm:grid-cols-2 lg:grid-cols-3 to increase the column count on larger screens.
Why is my grid column overflowing its width?
A child's content is wider than the track. Tailwind's minmax(0, 1fr) usually handles this; if not, add min-w-0 to the child so it can shrink and wrap.

Popular Layout Guides