Skip to content
Sign in

CSS Flexbox vs Grid: When to Use Which (with Layouts You Will Actually Build)

A practical comparison of Flexbox and CSS Grid. Build a navbar, a card grid, a holy-grail page layout and a responsive dashboard, and learn a simple rule for choosing.

CodeOrbit Learn TeamPublished 3 min read

Flexbox and Grid are both modern layout systems, and both are well supported in every current browser. The difference in one line:

Let's see what that means with layouts you will really build.

Flexbox: one direction

A navigation bar

HTML
<nav class="nav">
  <a class="logo" href="/">CodeOrbit</a>
  <a href="/tutorials">Tutorials</a>
  <a href="/exams">Exams</a>
  <a class="cta" href="/login">Sign in</a>
</nav>
CSS
.nav {
  display: flex;
  align-items: center;     /* vertical centring */
  gap: 1rem;               /* space between items */
  padding: 0.75rem 1rem;
}
.nav .cta {
  margin-left: auto;       /* pushes the button to the far right */
}

margin-left: auto is the Flexbox trick for "push this item to the end". The browser gives all leftover space to that margin.

Centring anything

CSS
.center {
  display: flex;
  justify-content: center;  /* main axis */
  align-items: center;      /* cross axis */
  min-height: 100vh;
}

flex: grow, shrink, basis

CSS
.sidebar { flex: 0 0 240px; }   /* don't grow, don't shrink, start at 240px */
.content { flex: 1; }           /* take all remaining space */

Property

Meaning

flex-grow

How much of the extra space an item takes

flex-shrink

How much it gives up when space is short

flex-basis

Its starting size before growing or shrinking

Grid: two directions

A responsive card grid with zero media queries

CSS
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.25rem;
}

This one line creates as many columns as fit, each at least 260px wide, sharing the remaining space equally. On a phone you get 1 column, on a tablet 2, on a laptop 3 or 4, automatically.

The holy-grail page layout

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

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

grid-template-areas reads almost like a picture of the page, and rearranging the layout for mobile is just redrawing that picture.

A dashboard with a big tile

CSS
.dashboard {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.dashboard .streak { grid-column: span 2; grid-row: span 2; }  /* big highlight tile */

Using both together

The best layouts usually combine them: Grid for the page and card grid, Flexbox inside each card.

CSS
.card {
  display: flex;
  flex-direction: column;
}
.card .footer {
  margin-top: auto;          /* keeps the button at the bottom of every card */
  display: flex;
  justify-content: space-between;
  align-items: center;
}

How to choose

Question

Choose

Items in a single row or column?

Flexbox

Content size should decide the layout?

Flexbox

Rows and columns must line up?

Grid

You are designing the page skeleton?

Grid

Overlapping items in the same cell?

Grid

Common mistakes

  • Using margins for gaps. Both Flexbox and Grid support gap; it never adds space at the edges.
  • Fixed widths in flex items. width: 300px can still shrink; use flex: 0 0 300px if it must not.
  • Forgetting min-width: 0. Long text inside a flex item can overflow because flex items default to min-width: auto. Add min-width: 0 to let it shrink and truncate.

Practice task

Build a "test series" page: a header, a filter sidebar and a grid of test cards. Make the sidebar move below the header on phones using only grid-template-areas, and keep each card's "Start" button aligned at the bottom with Flexbox.

Tags:#CSS#Web#Layout

Frequently asked questions

Is Grid replacing Flexbox?

No. They solve different problems and are designed to work together. Most modern sites use both.

Which is better for responsive design?

Both. Grid's auto-fill with minmax often removes the need for media queries; Flexbox with flex-wrap is great for rows of tags or buttons.

Do I still need a CSS framework for layout?

Not for layout. Flexbox and Grid cover what frameworks used to provide. Utility frameworks like Tailwind simply give shorter names for the same properties.

Share:WhatsAppTelegramXFacebookLinkedIn

Related posts