Content updated
By the end, you can…
- A placement hole is not always a mistake. Dense packing may fill it by changing the visual sequence.
- Predict the positions of two spanning cards followed by one small card, then choose a layout that preserves a meaningful sequence.
Build on the CSS introduction
You already know how a span covers more than one track. Now give both A and B a two-column span in a three-column grid. A takes the first two cells of row one. B cannot fit in the remaining cell, so it starts row two. Ordinary row auto-placement continues forward from there, allowing C to fit after B rather than returning to the earlier hole.
row dense asks the placement algorithm to look back for spaces that later items can fill. C can then occupy the hole beside A. The visual sequence becomes A, C, B even though the source still says A, B, C. This is especially important for steps, stories, and focusable controls where the reading sequence conveys meaning.
Use the ordinary placement as the baseline and decide whether a hole is acceptable before filling it. You can redesign spans or change the meaningful source structure when the content permits. Do not use dense packing merely to make every screenshot look full. The preview intentionally uses noninteractive cards so you can inspect the order without suggesting an inaccessible control layout.
What to remember first
A placement hole is not always a mistake. Dense packing may fill it by changing the visual sequence.
Tools for this experiment
grid-column: span 2Require adjacent room- A two-track item cannot fit into a one-cell hole.
grid-auto-flow: rowContinue forward- Later automatic items normally continue from the placement cursor rather than backfilling earlier gaps.
grid-auto-flow: row denseLook back for holes- Later items may move visually ahead of earlier siblings while DOM order stays the same.
nth-child(1), nth-child(2)Target two source positions- The selectors refer to the DOM sequence, not the positions produced by Grid.
Walk through an example
Use this HTML inside the body of a document and place the CSS in your linked stylesheet. The preview adds a dashed outline and card colors to make boundaries visible; those decorations do not control the layout. Its body has 16px padding on each side. Fixed preview widths are intentional: on a small screen, scroll inside the preview to inspect the whole experiment.
<div class="layout">
<div class="item">A</div>
<div class="item">B</div>
<div class="item">C</div>
</div>.layout {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-auto-rows: 60px;
grid-auto-flow: row;
gap: 12px;
}
.item {
padding: 8px;
}
.item:nth-child(1),
.item:nth-child(2) {
grid-column: span 2;
}A leaves one cell in row one. B starts row two, and C follows B there. The first-row hole remains.
See it happen: try a small change
Read A, B, C from the HTML, then compare their positions. A and B each need two adjacent columns.
Code to notice
.layout {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-auto-rows: 60px;
grid-auto-flow: row;
gap: 12px;
}
.item {
padding: 8px;
}
.item:nth-child(1),
.item:nth-child(2) {
grid-column: span 2;
}Live result
What changed: A leaves one cell in row one. B starts row two, and C follows B there. The first-row hole remains.
A common wrong turn
Filling every cell is not automatically an improvement. Dense placement does not rewrite the HTML or keyboard order. Also avoid combining large spans with fewer columns without checking for unintended implicit columns.
Try it in your own project
Copy the example into your local HTML and CSS files. Predict one change before saving and refreshing the browser. Use the interactive versions above to check your prediction, then explain which container, item, or track changed. The related playground offers extra practice with its supported controls; use your local files for properties it does not expose.
Your turn: predict placement gaps without changing reading order
Predict the positions of two spanning cards followed by one small card, then choose a layout that preserves a meaningful sequence.
Optional exploration
Use the playground to explore the controls and generated code. It is an open experiment, so it does not check your answer.
- Create A, B, and C in that source order. Give A and B a span of two in a three-column grid.
- Draw the ordinary row placement before running it. Locate the empty cell in row one and C beside B in row two.
- Compare row dense. Explain why C moves before B visually, then keep ordinary placement when your cards represent ordered steps.
Go to the source
Examples are authored for Tuklas and checked with code and reference documentation. This is not a claim of independent human review. Suggest a correction.