Unit 3 · CSS: the look and the layout
CSS grid: 1fr vs 100% columns
100% means the full width of the grid, so 200px 100% overflows by 200px. 1fr means one share of whatever space is left after fixed columns, so 200px 1fr fills the row exactly.
The mix-up
What people often think
“100% means "the rest of the space".”
What the tutor says
100% means the whole width, so the page overflows by 200px. 1fr means one share of whatever space is left.
How it works
Only the container needs display: grid. Its children drop into the cells in order, left to right, one cell each.
Grid does not guess that a header should be full width. Tell it with grid-column: 1 / -1, which spans from the first line to the last.
An example
.page {
display: grid;
grid-template-columns: 200px 1fr;
}
.page header,
.page footer {
grid-column: 1 / -1;
}Close cousins of this mix-up
The tutor watches for these in the same lesson.
“Grid works out that the header should be full width.”
Grid fills cells one by one, left to right. Without grid-column: 1 / -1, the header takes one cell and the nav squeezes in beside it.
“Each part of the page needs display: grid.”
Only the container needs it. .page becomes the grid, and the header, nav, main and footer drop into its cells.
Practise it with a tutor watching
Flexbox and grid
Lay out a row of cards with flexbox and a whole page with grid.
Free, no account needed.