cssintermediate
CSS Grid Layout
Two-dimensional grid layout
7 questions
By EZ4Code Team
1. Which property enables grid layout?
display: grid
display: flex
position: grid
grid: on
Explanation: Setting display: grid on the parent element enables grid layout; child elements become grid items.
2. What does grid-template-columns: 1fr 2fr 1fr mean?
Three columns, distributing available space in a 1:2:1 ratio
Three rows
Three-pixel columns
Three equal columns
Explanation: fr is a proportional unit; 1fr 2fr 1fr means three columns distribute the remaining available space in a 1:2:1 ratio.
3. What does grid-gap (or gap) do?
Sets the spacing between grid rows and columns
Sets borders
Sets padding
Sets column width
Explanation: gap (formerly grid-gap) defines the spacing between grid rows and columns; row-gap/column-gap can be used separately.
4. What is repeat(3, 1fr) equivalent to?
1fr 1fr 1fr
3fr
1fr 3 times, but with gaps
3px
Explanation: repeat(3, 1fr) repeats 1fr three times, equivalent to 1fr 1fr 1fr, commonly used to create equal columns.
5. What does grid-column: 1 / 3 mean?
The element spans from grid line 1 to grid line 3, occupying 2 columns
Occupies columns 1 to 3, total 3 columns
Occupies 1 column
Occupies 3 columns
Explanation: In grid-column: start / end, line numbers start from 1; 1 / 3 spans from line 1 to line 3, occupying 2 columns.
6. What does grid-template-areas do?
Intuitively defines grid layout via named areas
Sets column width
Sets row height
Sets spacing
Explanation: grid-template-areas uses strings to name areas, combined with grid-area to place elements in corresponding areas, for visual layout.
7. What is the main difference between Grid and Flexbox?
Grid is a two-dimensional layout (rows and columns simultaneously); Flexbox is a one-dimensional layout
They are completely identical
Flexbox is two-dimensional, Grid is one-dimensional
Grid cannot be used for responsive design
Explanation: Grid is suited for two-dimensional (rows and columns) layout; Flexbox is suited for one-dimensional (main axis) layout; the two are often used together.