Have you played around with the new CSS Flexbox or Grid specs?

TL;DR

Flexbox and Grid are established CSS layout systems rather than experimental “new specs.” Flexbox is best when a container mainly lays items out along one axis; Grid is best when rows and columns need coordinated tracks. They are commonly combined, and the choice should follow the layout relationship rather than a rule that one replaces the other.

Flexbox for one-dimensional relationships

Flexbox distributes and aligns items along a main axis, with a cross axis perpendicular to it. It works well for navigation, toolbars, button groups, and component internals where content size influences the layout.

.toolbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.toolbar__search {
  flex: 1 1 16rem;
}

Items can wrap, but each flex line lays itself out independently. Flexbox does not create shared column tracks across those lines.

Grid for two-dimensional relationships

Grid defines rows and columns at the container level. It is useful when items must align in both dimensions:

.dashboard {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: 1rem;
}

.dashboard__wide-card {
  grid-column: 1 / -1;
}

The wide card spans every explicit column, including when the auto-fitting grid collapses to one. If it should span exactly two tracks only when two tracks fit, add a content-driven breakpoint and test it with real content.

Combining them safely

A typical page uses Grid for the overall cards and Flexbox inside a card to align its title and actions. Features such as gap, minmax(), auto-fit, and subgrid can reduce wrapper elements and breakpoints, subject to the project's actual browser support requirements.

Visual placement is not a substitute for semantic source order. Grid and Flexbox can display items in a different order without changing reading, focus, or accessibility-tree order, so the DOM should remain logical.

Further reading

• Basic concepts of Flexbox (MDN)
• Basic concepts of Grid Layout (MDN)
• CSS Grid Layout and accessibility (MDN)

Exercises