Grid
The grid container (columns, rows, the fr unit, repeat, gap, named areas) and how children are placed (grid-column, grid-row, span): reading a grid, computing its columns and choosing between grid and flexbox.
- 26 cards
- 6 topics
- Free
The outline, topic by topic
Each topic is weighted the way the exam weighs it.
- Concepts
- Questions
- Sort and link
- The numbers
- Scenarios
- Understand
A few cards from the deck
Grid container: what is it?
Show the answer
An element whose display property is grid: its direct children become grid items, laid out in columns and rows in two dimensions.
Only direct children are placed in the grid. Grandchildren stay inside their parent element, as in an ordinary layout.
Which columns does this grid item occupy?
```css
.photo { grid-column: 2 / 4; }`- Columns 2 and 3
- Columns 2, 3 and 4
- Columns 3 and 4
- Only column 4
Show the answer
Columns 2 and 3
2 / 4runs from line 2 to line 4. The end line is not included: column 4, which starts at line 4, is left out.repeat(4, 1fr)creates … columns of equal width, which share the container's ….Show the answer
repeat(4, 1fr)creates four columns of equal width, which share the container's free space.repeat(4, 1fr)is shorthand for1fr 1fr 1fr 1fr; the first argument is the number of repetitions.The fr unit: what is it?
Show the answer
A grid unit that stands for a share of the free space: what is left of the container once fixed-size columns and gutters are removed.
With
200px 1fr 2frin 800 px and no gap, 600 px are left to share in 3 parts: 200 px and 400 px.