Flexbox and CSS Grid: laying out a page

Modern CSS has two layout systems built for arranging boxes: Flexbox for a single row or column, and Grid for two dimensions at once. Both are supported by every current browser, and both start with one display declaration on the parent.

Flexbox: one direction

Use Flexbox when items flow along a line: a navigation bar, a row of buttons, a card’s header with a title on the left and an icon on the right.

<nav class="toolbar">
  <a href="/">Home</a>
  <a href="/docs">Docs</a>
  <a href="/login" class="push">Log in</a>
</nav>

.toolbar {
  display: flex;          /* children become flex items in a row */
  align-items: center;    /* center them vertically */
  gap: 1rem;              /* space between items */
  flex-wrap: wrap;        /* allow a new line on narrow screens */
}

.toolbar .push {
  margin-left: auto;      /* takes the free space, pushing it right */
}

• flex-direction: row (default) or column.
• justify-content: spacing along the main direction, such as space-between or center.
• align-items: alignment across it, such as center or stretch.
• flex: 1 on a child: let it grow to fill the leftover space.

The shorthand flex: 1 1 200px means grow, shrink, and start from 200px wide, which gives you simple wrapping card rows.

Grid: rows and columns

Use Grid when you care about both directions: a page layout, a photo gallery, a form with aligned labels. A responsive card grid takes one line and no media queries:

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.5rem;
}

This says: make as many columns as fit, each at least 16rem wide, sharing extra space equally. On a phone you get one column; on a wide screen, three or four.

A whole-page layout with named areas

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

@media (min-width: 48rem) {
  .page {
    grid-template-columns: 1fr 16rem;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      "header  header"
      "main    sidebar"
      "footer  footer";
  }
}

.page > header { grid-area: header; }
.page > main   { grid-area: main; }
.page > aside  { grid-area: sidebar; }
.page > footer { grid-area: footer; }

The fr unit means a fraction of the free space. Named areas make the layout readable at a glance, and changing them in a media query rearranges the page without touching the HTML.

Which one should I use?

• Items in one line whose sizes come from their content: Flexbox.
• A layout where columns or rows must line up: Grid.
• They combine well: a Grid for the page, Flexbox inside each header or card.

Common gotchas

• Layout properties apply to direct children only. A grandchild is not a grid item unless its parent is also a grid or uses subgrid.
• Flex items have min-width: auto, so long words or wide content can overflow. Add min-width: 0 to the item to let it shrink.
• Keep the visual order close to the HTML order. Reordering with order or grid placement does not change the keyboard and screen reader order, which can confuse users.
• Use your browser DevTools’ Flexbox and Grid overlays to see lines, gaps, and areas.