CSS Grid Layout

Intermediate

CSS Grid is a two-dimensional layout model. A grid container establishes rows and columns, creates grid tracks between grid lines, and places its in-flow children into the resulting grid. Grid owns this two-dimensional layout algorithm; it does not replace the general sizing, box model, flow, positioning, or shared alignment models taught elsewhere.

The useful mental model is not “a collection of grid properties.” Start with the grid container, its explicit and implicit tracks, the grid lines that bound those tracks, and the placement of grid items. Then learn how track sizing and automatic placement turn those definitions into a rendered layout.

A grid container creates the grid formatting context

Set display: grid or display: inline-grid on the container. Its in-flow children become grid items. The container still participates in its surrounding layout through its outer display role, while its children are laid out by the Grid algorithm rather than ordinary block or inline flow.

?

Explicit tracks define the grid you asked for

grid-template-columns and grid-template-rows create explicit column and row tracks. A track is the space between two adjacent grid lines. Fixed lengths, intrinsic sizing keywords, percentages, minmax(), and the fr unit can participate in track sizing.

The fr unit represents a flexible share of the leftover space available to flexible tracks after the algorithm accounts for other contributions. It is not simply another length unit, and it does not mean “one fraction of the entire container” when fixed or intrinsic tracks also consume space.

?

minmax() expresses a track constraint

minmax(min, max) gives a track a lower and upper sizing boundary. It is especially useful when a layout needs flexible growth without allowing a track to become smaller than a meaningful minimum. The minimum and maximum are resolved by the Grid track-sizing algorithm; they are not a replacement for the general Sizing lesson.

?

Grid lines are the coordinates of placement

Every explicit track is bounded by grid lines. Numbered lines start at 1 in the relevant direction, and negative numbers count backward from the far edge. Placement describes a grid area by selecting its starting and ending lines.

grid-column and grid-row can name line positions, while the start/end syntax describes a span between lines. A value such as 1 / -1 deliberately means the first explicit line to the last explicit line, so it continues to span the full explicit grid when the track count changes.

?

Spans describe size without naming every line

A placement can use span to request a number of tracks rather than a specific ending line. For example, grid-column: 2 / span 2 starts at line 2 and occupies two columns. Spans become especially useful when repeated components should occupy a consistent number of tracks while the total grid changes.

?

Named lines can make placement readable

Grid lines may have names in square brackets inside track definitions. Named lines let placement describe layout roles instead of relying only on numeric coordinates. The names belong to the Grid placement model and can coexist with numbered lines.

Template areas describe a named grid

grid-template-areas assigns names to rectangular areas by writing a map of quoted strings. A repeated name must form a single rectangular area. A dot represents an unnamed cell. The resulting names can then be assigned to items with grid-area.

?

Implicit tracks appear when placement needs more grid

The explicit grid is only the portion directly defined by the template. If placement or automatic placement requires tracks outside that explicit grid, the Grid algorithm can create implicit tracks. grid-auto-columns and grid-auto-rows provide sizing rules for those implicit tracks.

?

Automatic placement fills the grid when you do not place every item

Grid has an automatic placement algorithm for items whose positions are not fully specified. grid-auto-flow controls whether auto-placement progresses by rows or columns and whether dense packing is requested. Dense packing can fill earlier holes, but it can also make visual order differ from source order.

?

Responsive repetition belongs to Grid’s track model

repeat() lets a template express repeated tracks without writing them individually. auto-fill and auto-fit can create responsive repeated tracks based on available space. minmax() commonly supplies a lower bound so cards remain usable while the number of columns changes.

auto-fill and auto-fit are related but not identical. auto-fill preserves empty repeated tracks when there is room for them; auto-fit collapses empty repeated tracks so remaining items can expand into the available space. The distinction is visible when the container is wider than the number of items.

?

Grid item sizing is part of track sizing, not a second Sizing lesson

Grid track sizing considers the contributions of grid items, intrinsic sizes, fixed constraints, flexible tracks, and available space. A track can therefore respond to its contents even when the author did not give it a simple fixed length. The lesson focuses on how those contributions participate in Grid rather than redefining the general CSS Sizing model.

?

Subgrid lets nested grids participate in an ancestor grid

Grid Level 2 adds subgrid. A grid item can use subgrid for rows or columns so the nested grid participates in the sizing of the corresponding parent grid tracks. This is different from simply creating another independent grid: the nested layout shares the parent track sizing structure on the chosen axis.

?

Alignment is shared, while Grid supplies the layout context

Grid uses the shared Box Alignment model for aligning grid items and distributing tracks. This lesson therefore demonstrates alignment only where it changes the interpretation of Grid layout; it does not redefine alignment subjects, safe/unsafe alignment, or the shared place-* model. Those concepts belong to Box Alignment.

?

Grid placement is independent of source order

Explicit placement can move a grid item visually without changing its position in the document source. This makes Grid powerful, but it also means visual rearrangement should not be used casually to communicate a different reading order. Source order and semantic structure remain document concerns.

When Grid and Flexbox solve different problems

Grid is designed for two-dimensional relationships between rows and columns. Flexbox is designed for one-dimensional distribution along a main axis. They can be nested: Grid can establish the page or component frame, while Flexbox can arrange content inside one grid area. The distinction is about the layout model being solved, not a rule that one technology must always replace the other.

1. Use Grid when rows and columns form the layout structure.

2. Use Flexbox when the primary relationship is one-dimensional.

3. Use shared Box Alignment concepts consistently across both.

4. Keep general sizing, spacing, and writing-mode rules in their existing owners.

Common Grid debugging mistakes

1. Inspect the explicit grid before assuming an item is misplaced.

2. Check the numbered or named lines that define the item’s area.

3. Distinguish explicit tracks from implicit tracks.

4. Check whether auto-placement or dense packing is moving an item.

5. Check intrinsic content contributions before forcing arbitrary widths.

6. For responsive repeats, inspect minmax(), auto-fit, and auto-fill together.

7. When nested alignment is confusing, return to the shared Box Alignment model.

Developing features stay clearly separated from the stable core

The current W3C Grid series includes Level 3 as a Working Draft introducing masonry layout. Masonry is therefore tracked as developing work, not silently folded into the foundational Grid lesson as though it had the same specification status as the established Level 1 and Level 2 model. Future rehabilitation can address it separately if the curriculum plan calls for it.

Quick checks: diagnose the model, not the property list

?

?

?

?

.cards { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; }
.cards article { display:grid; grid-template-rows:?; grid-row:span 2; border:1px solid currentColor; padding:.75rem; }
.cards h3,.cards p { margin:0; }