CSS Grid Layout Quiz

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.