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
In the CSS Grid, what does the
fr
unit stand for?
Select your answer
Question 2/15
If
grid-template-rows: repeat(2, 1fr 200px);
is used, what is the layout structure?
Select your answer
Question 3/15
How do you center a grid item in a cell?
Select your answer
Question 4/15
What is indicated by
grid-template-areas: 'a . b';
?
Select your answer
Question 5/15
If a grid container is defined with
display: grid;
, what will happen if no other grid properties are set?
Select your answer
Question 6/15
What is the default value of
grid-auto-flow
in CSS Grid?
Select your answer
Question 7/15
What is achieved by setting
grid-area: 'header header header' 'nav main sidebar' 'footer footer footer';
?
Select your answer
Question 8/15
What will
grid-template-columns: repeat(3, minmax(150px, 1fr));
achieve?
Select your answer
Question 9/15
What is the effect of setting
grid-auto-flow
to dense
?
Select your answer
Question 10/15
In CSS Grid, what does
display: subgrid;
allow?
Select your answer
Question 11/15
How is the grid item order affected by
grid-auto-flow: row;
?
Select your answer
Question 12/15
Which property defines how grid items start and end within individual grid cells?
Select your answer
Question 13/15
What does a fractional unit
fr
represent in a grid layout?
Select your answer
Question 14/15
If a grid rule
grid-template-columns: 50px auto;
is applied, what will be the effect?
Select your answer
Question 15/15
What does
grid-template-columns: auto 1fr;
imply about the width of the two columns?
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
In the CSS Grid, what does the <pre><code>fr</code></pre> unit stand for?
Available answers
The
fr
unit stands for 'fraction', which represents a fraction of the available space in the grid container.
Question 2/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
If <pre><code>grid-template-rows: repeat(2, 1fr 200px);</code></pre> is used, what is the layout structure?
Available answers
grid-template-rows: repeat(2, 1fr 200px);
results in four row tracks, alternating between sizes 1fr and 200px.
Question 3/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
How do you center a grid item in a cell?
Available answers
Centering a grid item within its respective cell involves setting both
justify-self: center;
and align-self: center;
.
Question 4/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
What is indicated by <pre><code>grid-template-areas: 'a . b';</code></pre>?
Available answers
grid-template-areas: 'a . b';
defines three columns where 'a' and 'b' are separated by a column with no grid item (indicated by '.').
Question 5/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 6/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
What is the default value of <pre><code>grid-auto-flow</code></pre> in CSS Grid?
Available answers
The default value for
grid-auto-flow
is row
, meaning new items are automatically placed in rows following the available grid lines.
Question 7/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 8/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 9/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
What is the effect of setting <pre><code>grid-auto-flow</code></pre> to <pre><code>dense</code></pre>?
Available answers
Setting
grid-auto-flow
to dense
fills in the smaller items into empty spaces created due to item sizing, potentially rearranging items out of the order they are defined in the source.
Question 10/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
In CSS Grid, what does <pre><code>display: subgrid;</code></pre> allow?
Available answers
The
display: subgrid;
feature lets a nested grid inherit parent tracks, maintaining visual consistency of item alignment.
Question 11/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
How is the grid item order affected by <pre><code>grid-auto-flow: row;</code></pre>?
Available answers
With
grid-auto-flow: row;
, items are placed along the rows first, following the order provided in the HTML source, while accommodating space constraints.
Question 12/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 13/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
What does a fractional unit <pre><code>fr</code></pre> represent in a grid layout?
Available answers
The
fr
unit indicates a fraction of the available space not already occupied by fixed-size tracks.
Question 14/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
If a grid rule <pre><code>grid-template-columns: 50px auto;</code></pre> is applied, what will be the effect?
Available answers
grid-template-columns: 50px auto;
sets the first column's width to 50px, while the second adapts to the remaining available space.
Question 15/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.