CSS Flexbox vs Grid Tutorial: Differences and Layout Examples

Flexbox and Grid are the two modern CSS layout systems. Both are supported in every current browser. The simple rule:

Flexbox is one-dimensional: it arranges items in a row or a column.
Grid is two-dimensional: it arranges items in rows and columns at the same time.

Flexbox basics

Turn a container into a flex container, and its direct children line up in a row.

css

.navbar {
  display: flex;
  justify-content: space-between; /* main axis: left-right */
  align-items: center;            /* cross axis: top-bottom */
  gap: 16px;
}

html

<nav class="navbar">
  <a class="logo" href="/">APEX</a>
  <ul class="links">...</ul>
  <a class="btn" href="/contact">Book demo</a>
</nav>

Key Flexbox properties

Property	What it does
`flex-direction`	`row` (default) or `column`
`justify-content`	Alignment along the main axis: `flex-start`, `center`, `space-between`
`align-items`	Alignment along the cross axis: `stretch`, `center`, `flex-start`
`flex-wrap`	Allow items to wrap onto new lines
`gap`	Space between items
`flex: 1` (on a child)	Let the child grow to fill free space

Classic trick: perfect centring

css

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

Grid basics

Define columns (and optionally rows) on the container, and children fill the cells.

css

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

1fr means "one fraction of the free space", so three equal columns.

Responsive cards without media queries

css

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}

The browser fits as many 260px-or-wider columns as the screen allows: 1 on a phone, 2 on a tablet, 3 or 4 on a desktop. This one line replaces several media queries.

Page layout with named areas

css

.page {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  min-height: 100vh;
}
.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.footer  { grid-area: footer; }

@media (max-width: 768px) {
  .page {
    grid-template-columns: 1fr;
    grid-template-areas: "header" "main" "sidebar" "footer";
  }
}

Which one should I use?

Situation	Use
Navbar, button group, toolbar	Flexbox
Centring one thing	Flexbox (or Grid with `place-items: center`)
Card gallery, product grid	Grid
Full page layout	Grid
Items of unknown size in one line that should wrap naturally	Flexbox with `flex-wrap`

In real projects you use both together: Grid for the page and card layout, Flexbox inside each card to align its content.

Common mistakes

Using margins for spacing between flex or grid items: use gap instead.
Forgetting that only direct children become flex or grid items.
Using fixed pixel widths everywhere: prefer fr, %, minmax() and max-width for responsive layouts.

Interview questions

`justify-content` vs `align-items`? justify-content aligns along the main axis; align-items aligns along the cross axis.
What does `fr` mean? A fraction of the remaining free space in a grid container.
`auto-fit` vs `auto-fill`? Both create as many tracks as fit; auto-fit collapses empty tracks so items stretch, while auto-fill keeps the empty tracks.

Next steps

Rebuild a landing page you like using only Grid and Flexbox. Then learn React hooks to make it interactive, or join the Frontend Development + AI course.

CSS Flexbox vs Grid: When to Use Which (with Examples)