A gallery looks tidier after dense packing is enabled. A small card has moved into an earlier gap, yet pressing Tab still reaches another card first. Both observations can be correct: visual placement and document sequence are different parts of the page.
The short answer is that dense grid auto-placement can revisit earlier unoccupied cells for later items. It does not rewrite the document into the resulting visual order. Whether that arrangement serves the reader depends on what the items mean and how people navigate them.
This article traces an original eight-card grid, compares sparse and dense placement, changes the column count and tests the relationship between visual order and task order. It uses ordinary horizontal, left-to-right layout and deliberately simple spans. Begin with Websites for the wider responsibility to make complete journeys understandable.
eduKateSG · Websites
Find your next learning step
Keep the source sequence, placement inputs, occupied cells, visible order and interaction path explicit.
ROUTE 1 · CHAPTERS 1–5
Work the placement
Build the first-principles model and follow the central original example.
ROUTE 2 · CHAPTERS 6–10
Compare changed layouts
Change one condition and preserve the accounting at each step.
ROUTE 3 · CHAPTERS 11–15
Protect meaningful sequence
Include the additional inputs that alter a real component.
ROUTE 4 · CHAPTERS 16–19
Inspect and transfer
Test predictions and identify the limits of the simplified model.
ROUTE 5 · CHAPTERS 20–22
Check and continue
Use independent checks, useful questions and verified onward routes.
Chapter contents
Compare changed layouts · Chapters 6–10
6. Audit the coordinates rather than the impression
7. See why dense does not guarantee a shorter result
8. Change the number of columns
Protect meaningful sequence · Chapters 11–15
11. Decide whether the cards have a required sequence
12. Do not use visual reordering to repair weak source order
13. Treat the order property as another input
Inspect and transfer · Chapters 16–19
16. Do not confuse dense row packing with masonry
Check and continue · Chapters 20–22
20. Use a counterexample before accepting a broad claim
Begin by separating the document order, the order in which the layout algorithm processes items and the spatial order a reader may infer from the resulting page. These can coincide, but they are not interchangeable. A report that says the cards are in order needs to identify which of these sequences it actually checked.
Our fictional document contains eight cards labelled A through H in that source sequence. None has a non-default order value. The grid therefore processes them in that same sequence for the exercise. Their eventual rows and columns depend on spans and placement rules, so the visual arrangement can differ even though the processing sequence has not changed.
The distinction is especially important for linked cards. In our ordinary page, each card contains one link and there are no positive tabindex values or scripts changing focus. The expected keyboard sequence follows the links’ document sequence. A card placed higher on the screen does not thereby become an earlier link in that sequence.
Before discussing whether a layout is good, write all three accounts. Name the document sequence, explain any order modification used by layout and record the coordinates actually produced. This turns a vague complaint that the browser jumped strangely into a question about a particular relationship between the page’s structure and its visual presentation.
Our central grid has four equal columns and as many rows as placement requires. Every card spans one row. A spans three columns; B spans two; C and D span one each; E spans two; F, G and H span one each. No card has a definite row or column start, so all eight are auto-placed under this simplified setup.
We compare grid-auto-flow: row with grid-auto-flow: row dense. The row direction means that candidate positions are sought across a row before moving to later rows. Dense changes whether the algorithm looks back for earlier available positions when placing later items. It does not change the stipulated spans or the source sequence.
Use cells rather than pixels for the first pass. A cell is a position in the row-column grid; a three-column card needs three adjacent cells in the same row. Counting three empty cells scattered across several rows does not supply a valid position for that card. Its required shape matters as well as the amount of empty space.
The W3C Grid specification defines auto-placement and its wider cases. Our eight-card account isolates fully automatic placement with fixed spans. Explicit positions, multi-row items, writing modes and order changes require their own inputs. Keep those boundaries visible instead of treating this small paper model as the entire grid algorithm.
Start with an empty four-column grid. Card A needs three adjacent columns, so it occupies row one, columns one through three. Row one, column four remains empty. This is a useful first observation because the hole is real, but it is not large enough to receive every later card.
The next card B needs two adjacent columns. It cannot occupy the remaining single cell at the end of row one. Under our row-wise placement, it proceeds to row two and occupies columns one and two. The fact that the total number of empty cells in row one is nonzero does not make the required two-cell span fit there.
At this stage, both sparse and dense versions have the same positions for A and B. Dense packing has not made B smaller or split it around A. The difference appears when a later item can fit the earlier single-cell hole. This is why the mechanism should be explained through the sequence, rather than illustrated only with a finished screenshot.
Pause here and predict the position of C, which needs only one column. If the algorithm continues from its current progress, C can join B in row two. If it searches earlier holes again, C can fit beside A in row one. Those are the competing paths that the next two chapters follow separately.
With ordinary row auto-flow, C follows B into row two, column three. D fills row two, column four. The earlier hole beside A remains empty. Sparse placement progresses through the grid rather than returning to fill that earlier hole with the smaller C or D after B has moved the placement forward.
E needs two adjacent columns, so it starts row three in columns one and two. F occupies row three, column three, and G occupies row three, column four. H then needs a new row and occupies row four, column one. The grid has four occupied rows, even though the items cover only twelve cells in total.
The empty-cell account is instructive. Row one has one hole, row two is full, row three is full and row four has three unoccupied cells. There are four unused cells within the four-by-four bounding rectangle. That does not establish that the placement algorithm has made an error; it has followed the sparse policy under the supplied constraints.
Write the sparse reading-by-rows account as A; then B, C, D; then E, F, G; then H. The sequence of card starts remains consistent with A through H under our simple conditions. That agreement is a feature of this case, not a theorem that every possible grid with explicit positions or order changes preserves the original document sequence visually.
Begin again with the same empty grid and the same cards. A occupies row one, columns one to three; B occupies row two, columns one and two. For C, dense placement searches from the earlier part of the grid and finds row one, column four. C fills the hole that sparse placement left behind.
D then finds row two, column three. E needs two adjacent columns, so it cannot use the single remaining cell in row two; it starts row three, columns one and two. F is small enough to revisit and fill row two, column four. G and H finally fill row three, columns three and four.
The dense result uses three full rows. Reading card starts across rows gives A, C, B, D, F, E, G, H. The algorithm still processed A through H; it did not process C before B. C appears earlier spatially because its smaller shape fitted a hole that B could not use when B was processed.
This is a precise explanation of the reordering. Do not say dense sorts cards by width or always puts small cards first. B was processed before C, E before F, and each kept its specified span. The algorithm searched for a suitable unoccupied position for each successive item and thereby produced the different visible sequence.
CHAPTER 6 OF 22 · Compare changed layouts
6. Audit the coordinates rather than the impression
A coordinate ledger lets another reader check the account without relying on the visual attractiveness of a mock-up. Rows and columns below are one-based. A range means that the card covers every cell in that range. All row spans remain one, so the table records the full occupied area of each card.
| Card and column span | Sparse location | Dense location |
|---|---|---|
| A: 3 | Row 1, columns 1–3 | Row 1, columns 1–3 |
| B: 2 | Row 2, columns 1–2 | Row 2, columns 1–2 |
| C: 1 | Row 2, column 3 | Row 1, column 4 |
| D: 1 | Row 2, column 4 | Row 2, column 3 |
| E: 2 | Row 3, columns 1–2 | Row 3, columns 1–2 |
| F: 1 | Row 3, column 3 | Row 2, column 4 |
| G: 1 | Row 3, column 4 | Row 3, column 3 |
| H: 1 | Row 4, column 1 | Row 3, column 4 |
Check three invariants: each card appears once, each occupies its stipulated span and no occupied cells overlap. Then total the occupied cells: three plus two plus one plus one plus two plus one plus one plus one equals twelve. The dense three-by-four rectangle is full; the sparse four-by-four rectangle contains four unused cells.
The ledger establishes placement for this model. It does not prove the dense page is more usable. A usable design also needs meaningful sequence, readable content and predictable interaction. Keeping these conclusions separate lets a team acknowledge the space saving without silently treating geometric compactness as a complete measure of quality.
CHAPTER 7 OF 22 · Compare changed layouts
7. See why dense does not guarantee a shorter result
Remove H from the exercise while preserving every other assumption. Sparse placement now uses three rows: A in the first, B through D in the second and E through G in the third. Dense placement also uses three rows, although C and F still fill earlier holes. Dense has changed positions without reducing the number of occupied rows.
This is a useful counterexample to the claim that dense always makes a grid shorter. The policy attempts to use earlier holes for later items where the shape fits. Whether the resulting bounding height decreases depends on the actual collection of spans, positions and track sizing. A filled hole is not automatically an eliminated row.
Even when the row count falls, pixel height needs another check. Our simple paper model uses equal row heights for an easy comparison. A real grid may have content-sized rows, variable row spans or items whose content changes track sizing. Counting rows is not sufficient to predict every rendered height difference in those cases.
Record the benefit you actually observed. In the eight-card fixed-row exercise, dense uses three rows rather than four. In the seven-card exercise, it relocates items but leaves the row count at three. These are two different findings. A report should preserve that difference instead of converting the word dense into a universal promise of compactness.
Now give the same eight cards three columns instead of four, retaining their spans and ordinary row auto-placement. A fills row one. B occupies the first two columns of row two, with C beside it. D begins row three and E fills the next two columns. F, G and H fill row four.
Under these assumptions, sparse and dense produce the same arrangement. There are no earlier holes that the later cards need to revisit. The source sequence is unchanged, but the narrower grid has changed the opportunities available to the packing policy. A layout difference seen at one width is not automatically present at another width.
Try five columns as another paper check. A and B together fill row one. C and D take the first two cells of row two, E takes the next two and F fills the fifth. G and H begin row three. Again, this particular sequence leaves no earlier holes for dense to exploit, so both policies agree.
The four-column version is therefore the special width at which our chosen spans expose the difference clearly. A responsive test should include the relevant column configurations, not merely shrink a screenshot. Predict where the structural transition occurs, then inspect the actual layout at that condition. Content and constraints determine which widths reveal the mechanism.
CHAPTER 9 OF 22 · Compare changed layouts
9. Keep column count separate from viewport width
A viewport does not directly tell you how many columns a component has. The component can sit in a narrow sidebar, have a maximum width, or use an explicit media or container rule. A wide screen can contain a three-column gallery, while another page on the same screen can offer enough space for five columns.
When investigating placement, record the computed grid track configuration rather than infer it from a device label. Also record gaps and the relevant spans. A card expected to span two tracks may receive a different rule at the current breakpoint. The placement model must describe the inputs actually in use before its predicted coordinates mean anything.
For an original diagnostic exercise, put two copies of the gallery in containers with different explicit widths but the same viewport. Assign one three columns and one four. The first can preserve the simple sequence while the second displays C and F earlier. Their different outcomes do not require different source content or a browser inconsistency.
This local view helps teams test reusable components. A gallery should be checked in the contexts where it will appear, including embedded and translated versions. A page-wide screenshot can miss the component constraint that creates the unexpected order. The useful question is which grid the component actually has, and what its items require within that grid.
CHAPTER 10 OF 22 · Compare changed layouts
10. Follow keyboard navigation independently
Return to the dense four-column case, with one ordinary focusable link per card and no focus-order modifications. The source links remain A, B, C, D, E, F, G, H. The visible row-by-row account is A, C, B, D, F, E, G, H. These two sequences need to be checked separately.
Imagine focusing A and pressing Tab. Focus proceeds to B in the next row, then to C back in the first row. Later, E is reached in row three before F in row two. A sighted keyboard user may experience the focus indicator moving down and then back up. The denser appearance has not made that movement impossible.
The W3C Grid reordering guidance distinguishes visual rearrangement from logical source order. Our example uses the distinction to ask a reader-facing question: does the apparent sequence teach the user to expect an interaction order that the page does not provide? The answer requires the actual content and task.
Test with the keyboard instead of drawing a guessed focus path from a screenshot. Keep the focus indicator visible, note the sequence and check where the viewport scrolls. Also test the intended reading and interaction routes with appropriate accessibility methods. A layout ledger identifies a potential mismatch; it does not replace observing whether the complete task remains understandable.
CHAPTER 11 OF 22 · Protect meaningful sequence
11. Decide whether the cards have a required sequence
Different content gives the same coordinates different consequences. A set of independent landscape photographs may tolerate varied visual encounters. Eight numbered application steps do not have the same freedom. If later steps appear above their prerequisites, the design can suggest a misleading sequence even when each card’s own wording is accurate.
Ask what relationship the reader is expected to infer. Are the cards independent options, chronological events, ranked results or parts of one explanation? Do visual neighbours imply that they belong together? Is the first visible row expected to contain the first available choices? A choice of packing policy should follow those questions rather than precede them.
For an original comparison, label A through H as numbered preparation instructions. In the dense four-column arrangement, instruction three appears beside instruction one and before instruction two spatially. A reader can still follow printed numbers, but the layout has added work. Removing the numbers to make the cards look cleaner would remove an important recovery cue.
Now change the content to independent swatches with meaningful names. The same spatial arrangement may be acceptable if navigation and selection remain understandable. This is not a universal approval of dense galleries. It shows why a technical placement mechanism needs an editorial decision about meaning, followed by evidence from the actual intended task.
CHAPTER 12 OF 22 · Protect meaningful sequence
12. Do not use visual reordering to repair weak source order
Suppose the source places the final confirmation before the instructions needed to reach it. Moving the instructions visually above the confirmation can improve one screenshot while leaving the document’s underlying sequence unsuitable for other reading modes. A visual rearrangement should not be treated as a substitute for an appropriate logical source order.
Begin by making the source meaningful without the decorative arrangement. Then ask what visual variations the content can support. This provides a stable starting point for narrower screens, altered styles and different navigation methods. It also makes the resulting layout easier to explain because the source itself expresses the intended relationships.
For a learner exercise, read the card text in source order without looking at the grid. Does the sequence make sense? Then inspect the grid at three and four columns. Does either arrangement imply a different prerequisite or grouping? Record the mismatch where it occurs instead of declaring all reordering good or all reordering bad.
Keep the repair tied to the actual problem. If a process requires ordered steps, choose a layout that communicates them coherently. If independent cards merely have varied widths, decide whether their visual and interaction paths remain clear. The same CSS property can serve one content structure poorly and another adequately; neither conclusion follows from the property name alone.
CHAPTER 13 OF 22 · Protect meaningful sequence
13. Treat the order property as another input
Our main example gives every card the default order value. CSS can change the order in which grid items are considered for layout without changing their original DOM positions. That introduces a further distinction: order-modified document order is the processing sequence used by the placement algorithm, while the source remains a separate account.
Do not add order values merely to reproduce a desired screenshot and then assume the focus path has been repaired. Ordinary sequential navigation does not become a mirror of every visual layout change. A real page can also contain scripts and focus attributes that affect navigation, so inspect the actual behaviour rather than rely on a slogan.
For a bounded paper exercise, imagine H receives an order value that places it before the other cards for layout. Recompute placement from that changed processing sequence. You cannot retain the original coordinate ledger and simply rename its last entry. The inputs to the algorithm have changed, so the full sequence of fitting decisions may change as well.
Keep three notes during debugging: DOM order, computed order values and final grid coordinates. This small record helps explain why source inspection alone did not predict the screenshot, and why the screenshot alone did not predict keyboard movement. When several reordering mechanisms coexist, a tidy final picture can conceal a much less coherent underlying task.
CHAPTER 14 OF 22 · Protect meaningful sequence
14. Account for explicitly positioned items
A real grid may mix auto-placed cards with items that have definite row and column positions. Those occupied cells affect the search for later automatic items. Our empty-grid example deliberately excluded them so the effect of dense packing could be isolated. Reusing its ledger after adding a pinned card would ignore a changed input.
For a simple new exercise, reserve one cell near the start of the grid with an explicitly positioned item. Mark that cell occupied before tracing the relevant automatic placements. A card cannot use the cell merely because its source position comes earlier. Follow the actual placement phases and occupancy defined for the configuration.
This matters when a design pins a promotional card, a heading or an advert while leaving ordinary results automatic. The pinned item can create holes or force a wide result into another row. Dense placement may later fill some of those holes, creating a visible order that differs from the unpinned version in several places.
The practical test record should include all items affecting occupancy, even if a stakeholder thinks of one as decoration. If the element participates in grid placement, it belongs in the model. Inspect whether a nonparticipating overlay, an out-of-flow element or an actual grid item is involved before counting it as an occupied cell.
CHAPTER 15 OF 22 · Protect meaningful sequence
15. Distinguish occupied cells from visible paint
Grid placement works with grid areas, while the pixels a card paints can extend or clip differently. A shadow may reach into a neighbouring area without changing the card’s allocated span. An overflowing label can cover another card even though the placement ledger contains no overlapping occupied cells.
If two cards appear to collide, inspect both their allocated grid areas and their painted content. Correct non-overlapping placement does not prove that long text, images, transforms or decorative effects stay inside those areas. The remedy for an overflowing label may concern sizing or wrapping rather than the dense-versus-sparse policy.
For an original contrast, keep card C in its single cell but add a very long unbroken label under a controlled style that allows overflow. The placement coordinates need not change for the visible result to become confusing. Shortening the label in a test can reveal the paint problem, while leaving the underlying sequence issue unchanged.
This distinction protects two different investigations. One asks where the grid allocated each item; the other asks what the reader can see and interact with in that allocation. A reliable explanation follows both when necessary. Do not call every visual overlap a placement failure, or every clean occupancy table proof that the displayed interface is usable.
CHAPTER 16 OF 22 · Inspect and transfer
16. Do not confuse dense row packing with masonry
Our example is a row-and-column grid with defined spans. Dense searches for earlier places where those grid-area shapes fit. That is not the same description as a layout that continuously stacks differently sized items into whichever column currently has the shortest height. Similar-looking screenshots can come from different algorithms.
When someone asks for masonry behaviour, ask what movement they expect from a specific item set. Are rows aligned? Do items occupy integer row spans? Does the next item go into an earlier hole or onto the shortest column? These questions identify the actual mechanism better than borrowing a fashionable layout label.
Use our wide-card case as a test. Dense does not split B across the empty cell in row one and another cell elsewhere. It needs a suitable contiguous area. It also does not shrink B to make it fit. If a proposed layout requires either behaviour, the simple dense-grid model does not describe the requested result.
Keep implementation and usability questions connected. A different layout algorithm may solve a visual packing requirement while preserving or creating other sequence questions. Verify the support and behaviour of the actual chosen technology. The lesson here is the particular, testable action of dense auto-placement, not a promise that one keyword reproduces every compact gallery a designer can imagine.
Record the document sequence, each card’s computed spans, the explicit track configuration, auto-flow setting and any definite positions or order values. Then inspect the final coordinates. A screenshot is useful supporting evidence, but the inputs explain why the screenshot exists and how it may change at another width.
MDN's auto-placement guide provides a practical introduction alongside the standard. Browser grid overlays can help identify tracks and areas. Use them to check the layout you actually loaded, including implicit rows and columns, rather than assume the declared template exhausts the resulting grid.
For an interaction record, write the observed focus sequence separately. Include enough information to reproduce the state: viewport or container condition, content version and any expanded cards. A later screenshot with different text or a different number of results is not the same test merely because the stylesheet filename is unchanged.
Finally record the user-facing conclusion. Perhaps dense saves a row but creates a confusing step sequence; perhaps independent cards remain understandable; perhaps both policies use the same height. The conclusion should follow the measured configuration and actual task. A clean technical trace makes that design judgment more precise without pretending to make it automatic.
First, remove H from the four-column example. Predict whether dense still moves C and F, and whether it still reduces the occupied row count. The answer separates two effects: C and F can still fill earlier holes, but both sparse and dense now use three rows. A changed visual sequence does not require a height saving.
Second, restore H and use three columns. Predict the positions before checking. A fills the first row; B and C the second; D and E the third; F, G and H the fourth. Our chosen spans now leave no earlier hole for later items to exploit, so the policies agree under the stated conditions.
Then change the content labels from independent photographs to numbered procedural steps without changing the CSS. The coordinate answers remain the same, but the usability judgment may change. Explain why. This checks whether the learner can connect a correct technical account to the meaning a reader needs to recover from the page.
A strong transfer response names the unchanged mechanism and the changed condition. It does not merely say dense is good for pictures and bad for text. Some picture sequences carry strict narrative order; some text cards are independent options. The actual relationships, interaction path and evidence from the intended task should guide the design.
CHAPTER 19 OF 22 · Inspect and transfer
19. Check what happens when a result is inserted
A gallery can change after its initial load. Imagine that the fictional card list inserts a new one-column card immediately before B. Even when every existing card keeps its own span, the processing sequence has changed. Reusing the original coordinate table would therefore describe a different input set from the one now displayed.
In the four-column dense exercise, the new small card can take the hole beside A before B is considered. Later cards then search the occupancy left by that revised history. The useful question is not only whether the new card fits. It is which existing cards move and whether the reader can still locate the item being used.
If results can arrive or disappear during interaction, test that state change deliberately. Keep track of the focused control, the source sequence and the before-and-after coordinates. A layout that is understandable as a static gallery can become harder to follow when a small insertion changes several visible neighbours. The exact behaviour also depends on application updates, so inspect the real state transition.
This does not establish that every dynamic dense grid is unsuitable. It establishes a testable additional responsibility. The design should preserve a meaningful task as the collection changes, rather than judge only an initial screenshot. Stable labels, appropriate update behaviour and an intelligible source sequence can matter as much as the amount of empty space recovered.
CHAPTER 20 OF 22 · Check and continue
20. Use a counterexample before accepting a broad claim
Consider the claim that dense placement always preserves card order because the algorithm still processes the source sequence. Our eight-card example is a counterexample: processing order remains A through H, but the visible row-by-row sequence places C before B and F before E. The claim has confused two different meanings of order.
Now consider the claim that dense always breaks the visible sequence. The three-column transfer case contradicts that stronger assertion under our assumptions: both packing policies produce the same arrangement. Dense permits a different placement when a later item fits an earlier hole; it does not require such a hole to exist in every item set.
Writing both counterexamples produces a more useful statement than either slogan. The policy can change spatial sequence without changing the underlying source, and its effect depends on the actual shapes and occupancy. That bounded conclusion tells a designer what to inspect and a learner what to predict when the column count or card list changes.
Does dense sort items by size? No. In our exercise, the algorithm processes the supplied sequence and searches for suitable earlier holes for each later item. The visible order changes because a smaller item’s shape fits a place that a previous wider item could not use, not because the items were globally sorted.
Does dense guarantee the minimum possible height? This lesson establishes no such guarantee. It follows the specified packing policy for stated items. Different algorithms and different item sequences can produce other arrangements, and content-sized tracks add further considerations. Report the result for the actual inputs rather than claim a universal optimum.
Will keyboard focus automatically follow the dense visual order? Not in our ordinary source-ordered link setup. Test the real page, including any focus management. CSS placement is not a general instruction to rewrite document order or every navigation sequence. A visual improvement can still leave an interaction mismatch.
What should I check first when a card moves unexpectedly? Confirm its actual span, the track count, dense setting, order value and definite placement rules. Then account for occupied cells and the processing sequence. If the grid area is correct but content collides, investigate sizing and paint rather than assume placement alone is responsible.
Style priority and token values
Resolving Cascade Layers When Important Declarations Reverse Priority · Why a Variable Fallback Cannot Repair Every Invalid Property Value.
Space and visual sequence
Redistributing Flex Shrink When Items Reach Their Minimum Sizes.
Return to Websites for complete tasks and maintenance. Read Responsive Web Design for the broader relationship between constraints and responsive choices, and Web Browsers, Layout Geometry, Pixels and Rendering for the rendering pipeline.
For source meaning and interaction checks, continue into Web Accessibility and Digital Accessibility Testing Services. For the governing technical account, use W3C Grid auto-placement, its reordering guidance and MDN's auto-placement guide. Sources checked on 27 October 2026; all card sets are original examples.
Continue through How X Works and Learning That Transfers into Life by explaining both where an item goes and what that movement asks of its reader. A placement rule becomes useful knowledge when its geometric result, logical sequence and practical limits remain visible together.