Blog
3 min read

Flexbox vs Grid: Which CSS Layout Should You Use?

Flexbox lays things out in one direction — a row or a column. Grid lays things out in two — rows and columns at once. When to use each, the handful of properties that do most of the work, and the Tailwind classes you'll see in AI-generated code.

Every modern layout is built with one of two CSS tools: Flexbox or Grid. They overlap, which is why people get confused. The simplest rule:

  • Flexbox arranges items in one direction — a row or a column.
  • Grid arranges items in two directions — rows and columns at the same time.

Flexbox: one line of things

Use Flexbox for a navigation bar, a row of buttons, an icon next to some text, or a card's contents stacked vertically.

.navbar {
  display: flex;
  justify-content: space-between; /* spread along the row */
  align-items: center;            /* line up vertically */
  gap: 1rem;                      /* space between items */
}

The properties that matter:

Property Does
flex-direction: row | column Which way items flow
justify-content Spacing along that direction (start, center, space-between)
align-items Alignment across it (center, stretch)
gap Space between items
flex-wrap: wrap Let items move to a new line when there's no room
flex: 1 (on a child) "Take up the leftover space"

The key idea: Flexbox lets content decide the size. Items are as wide as they need to be, and the leftover space is shared out.

Grid: rows and columns

Use Grid for a page layout (sidebar + main), a gallery of cards, a dashboard of tiles, or a form with aligned labels.

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* three equal columns */
  gap: 1.5rem;
}

1fr means "one fraction of the available space." Three 1fr columns are equal thirds.

The most useful grid line ever written makes a responsive gallery with no media queries:

grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));

"Fit as many columns as you can, each at least 250px wide, and stretch them to fill the row." On a phone you get one column; on a laptop, four.

Here the layout decides the size: you define the columns, and items drop into them.

Side by side

Situation Use
Navbar, toolbar, button row Flexbox
Icon + label Flexbox
Centring one thing Either (both are one line)
Card gallery Grid
Page layout with sidebar Grid
Items of unknown width that should wrap Flexbox with flex-wrap
Things that must line up in columns across rows Grid

They nest happily: a Grid page layout whose cards use Flexbox inside is completely normal.

In Tailwind

AI-generated code usually uses Tailwind classes instead of CSS:

<nav class="flex items-center justify-between gap-4">…</nav>

<div class="grid grid-cols-1 md:grid-cols-3 gap-6">…</div>

flex, items-center, justify-between and gap-4 are the Flexbox properties above. grid grid-cols-1 md:grid-cols-3 means one column on phones, three from medium screens up. (Responsive design basics)

When the layout breaks

  • Something overflows its flex container. Add min-width: 0 (min-w-0) to the child — flex items refuse to shrink below their content's width by default, and long words or code blocks push them out.
  • Grid items are different heights. That's normal; add align-items: start if you don't want them stretched.
  • Can't tell what's going on. Open browser dev tools; Chrome and Firefox show flex and grid overlays when you click the badge next to the element. (Browser developer tools)

The summary

  • Flexbox: one direction, content-sized. Grid: two directions, layout-sized.
  • Navbars and button rows → Flexbox. Galleries and page layouts → Grid.
  • repeat(auto-fill, minmax(250px, 1fr)) is the responsive gallery in one line.
  • Nesting the two is normal.

EasySpawn gives Claude Code a persistent server with your app running, so you can ask for a layout change and check it on the live preview from any device. See how it works or join the waitlist.

Related: How to Center a Div · Responsive Design Basics · What Is Tailwind CSS? · HTML, CSS, and JavaScript Explained

Keep reading