Line numbers, span and negative lines
b lands right after a because auto-placement moves forward. c must start on line 2, which is already used in row 1, so it drops to row 2. d has no free cell left in row 2 (the cursor is past c), so it starts row 3.
You place a grid item by naming the lines it starts and ends on (grid-column: 1 / 3), by saying how many tracks it spans (span 2), or by counting from the end with negative numbers (1 / -1); items may overlap, and later items or a higher z-index paint on top.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
In a 3-column grid, make the first item a full-width header and the last item a full-width footer, whatever the number of columns.
Make the featured photo in a 4-column gallery cover two columns and two rows, starting in the top-left corner.
Put a text label over the bottom of an image using grid overlap, with no position: absolute.
Explain it without notes
Explain the difference between grid-column: 2 / 4 and grid-column: 2 / span 2, and when you'd use span alone.
What does grid-column: 1 / -1 do, and when doesn't it reach the last visible column?
In what order does grid-area: 1 / 2 / 3 / 4 give its four lines?
How can two grid items overlap, and how do you control which one is on top?
Preview
Console
Nothing logged yet.Expected console output
a 1 / 3 x=0 y=0 w=200
b span 2 / auto x=200 y=0 w=200
c 2 / -1 x=100 y=40 w=300
d auto / auto x=0 y=80 w=100