OnlineCBT
Place a grid item between lines
Grid line numbers identify boundaries around tracks. An item can start at one line and end at another, or span a stated number of tracks. A three-column explicit grid has four column lines.
.grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1rem;
}
.featured { grid-column: 1 / 3; }
.full-width { grid-column: 1 / -1; }
.tall { grid-row: span 2; }The featured item covers columns one and two because it runs from line 1 to line 3. The full-width item reaches the last line of the explicit grid. The tall item spans two rows, with its starting position chosen by placement rules if not otherwise specified.
Negative lines and implicit tracks
Negative line numbers count backward from the end of the explicit grid. The value -1 does not mean “whatever happens to be the last implicit track after all placement”. Referring beyond explicit lines can create implicit tracks; inspect the grid overlay if unexpected columns appear.
Spanning affects placement
A wide item can leave holes under ordinary auto-placement. grid-auto-flow:dense may fill available holes with later items, but that can visually reorder items relative to document and keyboard order. Do not use dense packing when the reading sequence carries meaning.
Responsive adjustment
@media (max-width: 40rem) {
.grid { grid-template-columns: 1fr; }
.featured, .full-width { grid-column: auto; }
.tall { grid-row: auto; }
}Reset explicit spans when the track structure changes. Leaving a line reference intended for three columns can accidentally create additional tracks in the single-column layout.
Practice
- Create a three-column grid with one item spanning two columns.
- Enable grid line numbers in developer tools and identify its start/end.
- Switch to one column and verify there are no unintended implicit columns.
- Compare visual order with Tab order after experimenting with dense packing.
