CSS layout techniques compared

Two layout models, one mental model

Modern CSS layout is mostly two systems: Flexbox (one dimension at a time) and CSS Grid (two dimensions at once). Positioning, flow, tables and floats still exist, but the page that needs a header, a main column and a footer is built with Grid, and the row of buttons or cards is built with Flexbox.

The governing idea is "which dimension is the layout under my control". A flex container lays out children along a single axis, wrapping to the cross-axis only when you ask. A grid container defines tracks in both dimensions in one declaration.

Flexbox: the single-axis workhorse

Flexbox controls alignment, order and distribution along one axis:

.toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
}

The toolbox:

• flex-direction switches main axis (row vs column).
• justify-content places items along the main axis.
• align-items places items on the cross axis.
• flex-wrap moves overflow to the next line.
• gap (the modern gap property, not just margins) spaces the items.

Flexbox is the default for navigation bars, button groups, card actions, article footers, and any distribution of a row that may wrap. Its one-axis nature is a feature: a toolbar never needs to know its own rows.

CSS Grid: the two-axis planner

Grid declares tracks first, then places items into them:

.page {
  display: grid;
  grid-template-columns: 1fr 320px;
  grid-template-rows: auto 1fr auto;
  gap: 1.5rem;
}

Now every child is a cell, and grid-column / grid-row place items across the tracks, or you rely on auto-placement. The properties that make Grid powerful:

• fr units share the free space, so 1fr 1fr 1fr is a three-column read that expands with the container.
• auto-fill / auto-fit with minmax() build responsive layouts without media queries.
• Named areas (grid-template-areas) keep the arrangement readable in the CSS itself.

Use Grid for the page chrome (header, main, sidebar, footer), multi-column feature sections, dashboard cards that line up both ways, and any placement that is not a simple row.

Positioning and the older tools

• Positioning (static, relative, absolute, fixed, sticky): placement of an element out of flow is positioning, not layout. Keep it for precisely pinned elements (a toggle over a card, a sticky header), and don't build whole pages with absolute positioning.
• Floats: obsolete for layout; keep them only for the float-capture behaviour of images inside text.
• Table layout: still legitimately the format for tabular data, but not for page structure.
• Inline-block: a layout of gaps and surprises, useful for horizontal icons in a paragraph.

The decision in practice

Work the decision in this order:

1. Is the layout a one-dimensional collection of items aligned in a row or column? Use Flexbox.
2. Is it a two-dimensional page shape with tracks (rows and columns, sidebars, hero plus grid)? Use Grid.
3. Is one element pinned relative to something? Use positioning for that element alone, inside a Grid or Flex parent.
4. Is it old-column HTML? Rewrite the frame in Grid and keep the column content as a table if it is tabular.

The classic tell: a page header with a logo left, actions right, and one baseline line of text is Flexbox. The same header plus an overlapping tooltip is Flexbox with an absolutely positioned child. A full page that must stack header, main and footer: Grid.

Why it is not a competition

Grid and Flexbox are not rivals. The modern approach is a Grid page with Flexbox inside the cells: Grid for the frame, Flexbox for the components within it. The correctness is measurable in the responsive checks that test the layout at the small breakpoint, and the box model that explains how width and padding interact inside tracks.