Named lines and lines outside the grid
grid-column: content uses the lines named content-start and content-end. In the small grid, column 5 doesn't exist, so the browser adds two 30px implicit columns. 1 / -1 still spans only the three explicit columns (150px).
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
text width: 240 wide width: 300
small grid tracks: 50px 50px 50px 30px 30px
1 / -1 width: 150