Create a Two-Column Layout with Tailwind Grid

Two equal columns with grid-cols-2

grid grid-cols-2 gap-8 splits a container into two equal columns and drops the first two children side by side. Each column is exactly half the width regardless of its content — something plain flexbox will not guarantee without extra basis utilities.

<div class="grid grid-cols-2 gap-8">
  <div>Left</div>
  <div>Right</div>
</div>

.two-col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem;
}

Stack on mobile

Two columns are cramped on phones. Begin with a single column and split at a breakpoint: grid-cols-1 md:grid-cols-2. Below md the two blocks stack; at md and up they sit side by side.

<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
  ...
</div>

Unequal columns (sidebar + content)

For a wide content area beside a narrow sidebar, use fractional tracks: grid-cols-[2fr_1fr] gives the first column twice the width of the second. Or follow the 12-column convention with grid-cols-3 and col-span-2 for the main area.

<div class="grid grid-cols-[2fr_1fr] gap-8">
  <main>Content</main>
  <aside>Sidebar</aside>
</div>

Common mistakes

Using flex without basis. Flex columns size to content, not to half each; grid gives true equal halves.

Forgetting the mobile stack. Start at grid-cols-1 and split at a breakpoint.

Fighting for equal heights. Grid rows already align both columns — no extra work needed.

Frequently asked questions

How do I make a two column layout in Tailwind?

Use grid grid-cols-2 gap-8 on the container; the first two children become equal side-by-side columns.

How do I stack two columns on mobile?

Start with grid-cols-1 and add md:grid-cols-2 so the columns stack below the md breakpoint and split above it.

How do I make one column wider than the other?

Use fractional tracks like grid-cols-[2fr_1fr], or grid-cols-3 with col-span-2 on the wider column.