ArtOfCode.org
Toggle Menu
Home
Online Rust Compiler
Tutorials
Algorithms 101
Html Css Tutorial
Javascript Tutorial
Blog
All Posts
CSS Grid Mastery
Design two dimensional layouts.
1. Which CSS property is used to define a grid container?
display: grid
display: flex
display: block
display: inline
2. Which of the following properties define the size of grid tracks (rows/columns)?
grid-template-columns
grid-template-rows
grid-auto-columns
justify-content
3. The 'gap' property in CSS Grid adds space between grid items and the outer edges of the grid container.
True
False
4. What unit in CSS Grid represents a fraction of the available space in the grid container?
5. What is the default alignment of grid items along the inline (row) axis?
start
center
stretch
end
6. Which properties can explicitly position a grid item within the grid?
grid-column
grid-row
grid-area
place-self
7. A grid item can span multiple rows and columns using the 'grid-column' and 'grid-row' properties.
True
False
8. What property defines the number and size of grid rows in an explicit grid?
9. What does the 'grid-template-areas' property enable?
Naming grid regions for easy item placement
Setting the color of grid lines
Auto-sizing implicit grid tracks
Aligning items vertically
10. Which values are valid for the 'justify-items' property (aligns items along the inline axis)?
start
center
space-between
stretch
11. The 'grid-auto-flow' property controls how auto-placed items are inserted into the grid.
True
False
12. What is the shorthand property for 'grid-column-start' and 'grid-column-end'?
13. Which function creates grid tracks with a minimum and maximum size?
minmax()
fit-content()
repeat()
clamp()
14. Which properties apply to grid containers (not grid items)?
grid-template-columns
gap
grid-auto-rows
align-self
15. CSS Grid is a one-dimensional layout system, focusing only on rows or columns at a time.
True
False
16. What property aligns all grid items along the block (column) axis by default?
17. What does 'repeat(3, 1fr)' do in 'grid-template-columns'?
Creates 3 columns, each taking equal available space
Creates 1 column that repeats 3 times
Sets a minimum column size of 3fr
Defines 3 gaps between columns
18. Which properties align the entire grid within the grid container?
justify-content
align-content
place-content
justify-items
19. Implicit grid tracks are automatically created when items are placed outside the explicit grid.
True
False
20. What property is used to name grid lines for easier reference?
Reset
Answered 0 of 0 — 0 correct