CSS Grid Layout Quiz
Want to learn more than this quiz offers you? Have a look at my Frontend web
development courses.
Create an account and save your quiz results
Login and save your results
OR
Question 1/15
How do you explicitly place a grid item in the second line of the grid using CSS?
Select your answer
Question 2/15
What is the purpose of
justify-content: space-between;
in a grid container?
Select your answer
Question 3/15
How does CSS Grid handle overflow by default if more items exist than defined slots?
Select your answer
Question 4/15
How would you create a grid with 3 rows where the first row is 1fr, the second is 2fr, and the third is 1fr?
Select your answer
Question 5/15
What does
grid-template-columns: auto 1fr;
imply about the width of the two columns?
Select your answer
Question 6/15
Which function in CSS Grid can generate repeating track patterns?
Select your answer
Question 7/15
Which property defines how grid items start and end within individual grid cells?
Select your answer
Question 8/15
Which CSS property controls the size of the rows and columns in terms of minimum and maximum sizes?
Select your answer
Question 9/15
If a grid container is defined with
display: grid;
, what will happen if no other grid properties are set?
Select your answer
Question 10/15
What will
grid-template-columns: repeat(3, minmax(150px, 1fr));
achieve?
Select your answer
Question 11/15
What happens when
grid-column: 2 / -1;
is defined on a grid item?
Select your answer
Question 12/15
What effect does
align-items: stretch;
have on a CSS Grid?
Select your answer
Question 13/15
What is achieved by setting
grid-area: 'header header header' 'nav main sidebar' 'footer footer footer';
?
Select your answer
Question 14/15
How can you create equal-width columns that adjust to the layout size using CSS Grid?
Select your answer
Question 15/15
How do you style a specific grid item in a CSS Grid for both columns and rows?
Select your answer
Your Results
You did not answer any questions correctly.
Your Answers
Question 1/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
How do you explicitly place a grid item in the second line of the grid using CSS?
Available answers
grid-column: 2 / 3;
positions the item to start at column line 2 and end at column line 3, effectively placing it in the second column.
Question 2/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
What is the purpose of <pre><code>justify-content: space-between;</code></pre> in a grid container?
Available answers
The
justify-content: space-between;
property sets the items so there's equal space between each one, leaving extra space on the outside edges.
Question 3/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
How does CSS Grid handle overflow by default if more items exist than defined slots?
Available answers
By default, CSS Grid places additional items in implicit grid rows, creating new grid lines without affecting the explicit grid definition.
Question 4/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
How would you create a grid with 3 rows where the first row is 1fr, the second is 2fr, and the third is 1fr?
Available answers
The property
grid-template-rows: 1fr 2fr 1fr;
correctly sets up the desired proportions for the three rows.
Question 5/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
What does <pre><code>grid-template-columns: auto 1fr;</code></pre> imply about the width of the two columns?
Available answers
grid-template-columns: auto 1fr;
implies that the first column fits its content width, while the second column takes up the remaining space.
Question 6/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
Which function in CSS Grid can generate repeating track patterns?
Available answers
The
repeat()
function allows for repeating track sizes or patterns, simplifying the creation of large layouts with heavy repetition.
Question 7/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
Which property defines how grid items start and end within individual grid cells?
Available answers
grid-column
is used to define the starting and ending column lines for a grid item, determining how it spans across the grid.
Question 8/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
Which CSS property controls the size of the rows and columns in terms of minimum and maximum sizes?
Available answers
minmax(min, max)
is used to define a size range greater than or equal to min
and less than or equal to max
for grid tracks.
Question 9/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
If a grid container is defined with <pre><code>display: grid;</code></pre>, what will happen if no other grid properties are set?
Available answers
By default, if no dimensions are specified, the grid will create a single row and column where all items will occupy that single grid area line.
Question 10/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
What will <pre><code>grid-template-columns: repeat(3, minmax(150px, 1fr));</code></pre> achieve?
Available answers
Using
repeat(3, minmax(150px, 1fr));
allows each column to grow from 150px to dividing remaining space equally.
Question 11/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
What happens when <pre><code>grid-column: 2 / -1;</code></pre> is defined on a grid item?
Available answers
Using
grid-column: 2 / -1;
the item spans from the second column to the last column line, allowing for dynamic adjustment to grid size.
Question 12/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
What effect does <pre><code>align-items: stretch;</code></pre> have on a CSS Grid?
Available answers
align-items: stretch;
stretches grid items such that their full height fits the grid area.
Question 13/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
What is achieved by setting <pre><code>grid-area: 'header header header' 'nav main sidebar' 'footer footer footer';</code></pre>?
Available answers
grid-template-areas
defines grid layout using named areas, allowing the assignment of these names to specific items with grid-area
inside grid items.
Question 14/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
How can you create equal-width columns that adjust to the layout size using CSS Grid?
Available answers
Using either
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
or grid-template-columns: 1fr 1fr;
ensures columns are responsive, adapting to the overall container size.
Question 15/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
How do you style a specific grid item in a CSS Grid for both columns and rows?
Available answers
The syntax
grid-area: 2 / 2 / 4 / 4;
translates to: row-start/column-start/row-end/column-end, specifying the traversal across grid cells.