grid-auto-flow:dense Packing Note
Bounded row-auto-placement simulation for unit-row items in fixed columns with optional dense backfill; reports visual inversion without changing DOM/tab order. Not general spanning grid placement. Explicit supplied computed/layout context only; not a browser cascade/layout engine or cross-browser guarantee.
Description
Dense grid placement can backfill earlier holes with later items.
Dense grid placement can backfill earlier holes with later items.1
Visual position may therefore differ from source order even though the source sequence is preserved. Use grid-auto-flow:dense Packing Note to evaluate the supplied inputs under the specific model below.
When to use grid-auto-flow:dense Packing Note
Use grid-auto-flow:dense Packing Note to evaluate the supplied inputs under the specific model below. Define the supplied layout, token or rendering scenario and establish the relevant units and browser context independently.
How to use grid-auto-flow:dense Packing Note and understand its results
- Define the supplied layout, token or rendering scenario and establish the relevant units and browser context independently.
- Enter Explicit column count, Caller auto placed item column spans, Dense packing using the field table and validation rules below, then run the tool.
- Read Item row column starts, Source order visual inversion and interpret units, signs, ordering and placeholders as explained below.
- If the tool reports an input error, correct that field and rerun. A successful false result, empty match list or unknown-evidence placeholder has the specific meaning described here; check the limitations before applying the result.
| Input field | Meaning | Value type | Requirement |
|---|---|---|---|
| explicitColumnCount | Explicit column count | number | Required; constraints below |
| callerAutoPlacedItemColumnSpans | Caller auto placed item column spans | array of number | Required; constraints below |
| densePacking | Dense packing | boolean | Required; constraints below |
Enter an integer column count from 1 to 32, at most 128 integer item spans from 1 to that count, and a dense flag. In a unit-row, auto-only grid, scan row-major for consecutive vacant columns. Dense mode starts each search at position zero; ordinary mode starts at the advancing cursor. Return zero-based [row,column] placements and whether adjacent placements invert source order. Empty item lists are allowed; explicit placement and row spans are not modeled.
searchStart = dense ? 0 : cursor; fill first contiguous fitting span; cursor = placement+span Field order, units and branch conditions follow the implementation explanation above.
| Output field | Meaning | Value type |
|---|---|---|
| itemRowColumnStarts | Item row column starts | array of array |
| sourceOrderVisualInversion | Source order visual inversion | boolean |
{
"input": {
"explicitColumnCount": 3,
"callerAutoPlacedItemColumnSpans": [
2,
2,
1
],
"densePacking": true
},
"output": {
"itemRowColumnStarts": [
[
0,
0
],
[
1,
0
],
[
0,
2
]
],
"sourceOrderVisualInversion": true
}
}Limitations and assumptions
Dense auto-placement can fill earlier holes and change visual placement order. Assess reading and navigation order separately from these modeled coordinates.2
Visual position may therefore differ from source order even though the source sequence is preserved. Apply the exact scope and assumptions described above.
All listed fields require explicit values. Unexpected fields, incorrect types, nonfinite numbers and sparse arrays fail validation. Domain-specific bounds, alignments and supported tokens are stated above; extremely large inputs or outputs can also be rejected. These errors differ from successful results such as false, no matches or unknown evidence.
Alternative or Complementary methods
Use Multiple Backgrounds First-On-Top Order for a related task: Multiple background layers are listed from front to back.
Use Grid fr Free-Space Share Calculator for a related task: Fractional grid tracks share independently resolved remaining space.
References
-
grid-auto-flow:dense Packing Note — tool.io
-
CSS Grid Layout Level 2 — W3C
Similar or alternative tools
- Multiple Backgrounds First-On-Top Order
Multiple background layers are listed from front to back.
- Grid fr Free-Space Share Calculator
Fractional grid tracks share independently resolved remaining space.