CSS Grid vs Flexbox

Two Layout Tools, One Job

CSS Grid and Flexbox are two tools that help you arrange things on a webpage. They both move boxes around the screen, but they work best in different situations. Flexbox is great for one row or one column of things. Grid is great for bigger layouts with rows AND columns at the same time.

Think of Flexbox like beads on a string. The beads line up one after another, and you can decide how the string stretches, where the beads sit, and how much space is between them. Think of Grid like a sheet of graph paper. You draw the lines that make rows and columns, and then you place each box in the cell where it belongs.

Neither one is "better" than the other. They are different tools for different jobs. The trick is knowing which one fits the job you're trying to do.

Layout Is the Hard Part of Every Site

If you've ever tried to put a header, sidebar, and main content area on a page, you know how tricky layout can be. Old CSS used tricks like floats that broke in weird ways. Flexbox and Grid finally gave us tools that match how we actually think about pages: "three boxes in a row, evenly spaced" or "a sidebar on the left and main area on the right."

For vibe coders, this matters even more. You don't have to memorize every property. You just describe the layout you want in plain English — "a row of three cards with space between them" — and let the AI pick the right tool. Knowing the difference still helps though, because it tells you what to ask for.

The Four Steps to Lay Out a Page

No matter which tool you pick, the basic flow is the same. You decide what you're trying to lay out, pick the right tool, set it on the parent container, and tweak the children until it looks right.

Three Cards, Two Ways

Let's say you have three cards you want to show in a row. Here's the HTML for both versions — it's exactly the same. The only thing that changes is the CSS:

<div class="cards">
  <div class="card">One</div>
  <div class="card">Two</div>
  <div class="card">Three</div>
</div>

Version A — using Flexbox (one row, space pushed to the middle):

.cards {
  display: flex;          /* turn on flexbox */
  gap: 1rem;            /* space between cards */
  justify-content: space-between;
}

Version B — using Grid (three equal columns, no matter what):

.cards {
  display: grid;          /* turn on grid */
  grid-template-columns: 1fr 1fr 1fr;  /* 3 equal columns */
  gap: 1rem;
}

Both versions look almost identical for this case — three cards in a row with a gap. The difference shows up when the layout gets more complex. Grid shines when you need different-sized columns ("make the first card twice as wide"), or when items need to line up in BOTH directions. Flexbox shines when items can wrap naturally onto a new line as the screen gets smaller.

Knowledge Check

Test what you learned with this quick quiz.