When should I reach for Grid?

A layout tool made for relationships.

Before CSS Grid, developers often forced page layout through floats, tables or deeply nested containers. Those tools weren't designed to coordinate rows and columns. Grid provides a two-dimensional layout system: define tracks, place items, and let the browser resolve available space and intrinsic content sizes.

The original 2018 project already used CSS Grid to build a layered visual composition. This lab keeps that spirit but lets you manipulate the tracks yourself.

Move the boundaries.

Use the sliders below. Start with three columns, then try two and four. The elements stay in document order; only their placement changes. Try increasing the gap without changing the container width.

Notice that the browser distributes the remaining width among the 1fr tracks. Fractional units express a relationship to available space; they don't mean a fixed number of pixels.

Tracks, lines and the implicit grid.

.composition {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

display: grid creates a grid formatting context. grid-template-columns declares three column tracks. The browser creates extra rows as needed for six children. Use minmax(0, 1fr) when you want flexible tracks that may shrink despite a child's intrinsic minimum; be careful not to clip essential content.

Why not simply use Flexbox?

Flexbox distributes space along one main axis at a time. Grid aligns items along both rows and columns. Both can wrap or adapt, but they make different promises. Choose the layout model that matches the relationship you're trying to express.

Modern Grid also supports subgrid, which lets nested elements align to an ancestor's tracks. Container queries let components respond to their own available width. These solve different problems: alignment across nested grids and adaptation to component context.

When Grid is the right language.

• Use Grid for page regions, dashboards, galleries and aligned card collections where rows and columns both matter.
• Use Flexbox for a toolbar or navigation list organized along one direction.
• Use normal document flow for paragraphs and reading content. Not everything needs a layout system.
• Avoid manually positioning every item when auto-placement already expresses the relationship.

Order, zoom and performance.

Try navigating meaningful Grid children with a keyboard: focus follows the DOM, not an arbitrary visual rearrangement. Don't use order or explicit grid placement to conceal confusing source order. Test at narrow widths and high zoom; fixed columns can cause horizontal overflow.

Grid layout is an ordinary browser layout operation, not a GPU rendering effect. Changing the number of tracks during animation may trigger layout work; for an everyday responsive grid, these calculations are usually appropriate. Profile heavy repeated changes if the interaction demands them.

Recreate the original—with constraints.

Break it

Change a track to an impossible fixed width on a narrow screen. What happens? Try replacing the fixed width with minmax().

Build it

Make a six-tile editorial layout with one large feature tile. Then implement a one-column mobile layout without changing the reading order. Finally compare your composition to the reimagined Grid exhibit.

Go a little deeper.

• MDN — CSS Grid Layout
• MDN — Subgrid
• MDN — Container queries
• Original 2018 Grid composition