CSS Flexbox vs Grid 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
Which CSS property is used to create a flex container?
Select your answer
Question 2/15
What value of
flex-direction
will make a flex container display items vertically?
Select your answer
Question 3/15
What does setting
flex-wrap: wrap;
do in flexbox?
Select your answer
Question 4/15
To create an equally-spaced grid layout with 2 rows and 3 columns, which grid property is essential?
Select your answer
Question 5/15
Which CSS declaration makes a grid item span multiple columns?
Select your answer
Question 6/15
In flexbox, which property aligns items to the start of the cross axis?
Select your answer
Question 7/15
Which flex property defines the initial main size of a flex item?
Select your answer
Question 8/15
If a flex item has
align-self: stretch;
, what will it do?
Select your answer
Question 9/15
If a flexbox container has
flex-flow: row wrap;
, what does this mean?
Select your answer
Question 10/15
Which unit is typically used in CSS Grid for flexible lengths?
Select your answer
Question 11/15
What property will make a grid item automatically fill the empty spaces in a grid container?
Select your answer
Question 12/15
What value of
justify-content
will evenly distribute flex items with equal space around them?
Select your answer
Question 13/15
Which property is NOT used to control the spaces between rows and columns in a CSS Grid?
Select your answer
Question 14/15
How do you set the default alignment of items along the cross axis in a flex container?
Select your answer
Question 15/15
How do you make a flex item occupy more space than others in the same row?
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
Which CSS property is used to create a flex container?
Available answers
The property
display: flex;
is used to define a flex container, enabling the use of all the flex properties on its children.
Question 2/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
What value of <pre><code>flex-direction</code></pre> will make a flex container display items vertically?
Available answers
The
flex-direction: column;
property makes the flex container display its items in a vertical flow.
Question 3/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
What does setting <pre><code>flex-wrap: wrap;</code></pre> do in flexbox?
Available answers
Setting
flex-wrap: wrap;
allows flex items to wrap onto multiple lines as needed, rather than fitting into a single line.
Question 4/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
To create an equally-spaced grid layout with 2 rows and 3 columns, which grid property is essential?
Available answers
To define a layout with 2 rows and 3 columns of equal size, use
grid-template-rows
and grid-template-columns
with fractional units like grid-template-rows: repeat(2, 1fr); grid-template-columns: repeat(3, 1fr);
.
Question 5/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
Which CSS declaration makes a grid item span multiple columns?
Available answers
The
grid-column: span 2;
declaration is used to make a grid item span two columns.
Question 6/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
In flexbox, which property aligns items to the start of the cross axis?
Available answers
The
align-items: flex-start;
property aligns flex items to the start of the cross axis.
Question 7/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
Which flex property defines the initial main size of a flex item?
Available answers
The
flex-basis
property defines the initial main size of a flex item, before any space distribution occurs.
Question 8/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
If a flex item has <pre><code>align-self: stretch;</code></pre>, what will it do?
Available answers
align-self: stretch;
makes a flex item stretch to fill the container along the cross axis.
Question 9/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
If a flexbox container has <pre><code>flex-flow: row wrap;</code></pre>, what does this mean?
Available answers
flex-flow: row wrap;
means items are laid out in a row and can wrap onto new lines if needed.
Question 10/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
Which unit is typically used in CSS Grid for flexible lengths?
Available answers
The
fr
unit represents a fraction of the available space in a grid container, making it excellent for flexible layout design.
Question 11/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
What property will make a grid item automatically fill the empty spaces in a grid container?
Available answers
grid-auto-flow: dense;
makes grid items fill empty spaces in a grid, thus allowing items to out of order and fill in gaps.
Question 12/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
What value of <pre><code>justify-content</code></pre> will evenly distribute flex items with equal space around them?
Available answers
justify-content: space-around;
will evenly distribute flex items with equal space around each item.
Question 13/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
Which property is NOT used to control the spaces between rows and columns in a CSS Grid?
Available answers
padding
applies space inside an element's border, not specifically between rows and columns in a grid. For grids, you'd use gap
, row-gap
, or column-gap
.
Question 14/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
How do you set the default alignment of items along the cross axis in a flex container?
Available answers
The default alignment of items along the cross axis in a flex container is controlled by
align-items
, and centering them would be align-items: center;
.
Question 15/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
How do you make a flex item occupy more space than others in the same row?
Available answers
The
flex-grow
property is used to specify how much a flex item will grow relative to the rest of the flex items in the same container.