CSS Layout Techniques 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 CSS Grid, what does the
repeat
function do?
Select your answer
Question 2/15
What CSS property applies a 3D perspective effect to elements?
Select your answer
Question 3/15
When using CSS animations, which property specifies the time an animation takes to complete one cycle?
Select your answer
Question 4/15
Which CSS property allows you to control the wrapping of flex items in a flex container?
Select your answer
Question 5/15
Which CSS property adjusts the alignment of contents of the last line in a flex container?
Select your answer
Question 6/15
If an HTML element is using
position: absolute;
, to what is it positioned relative?
Select your answer
Question 7/15
What does
flex-grow: 0;
do to a flex item?
Select your answer
Question 8/15
In CSS Grid, what property would you use to overlap grid items within the same grid cell?
Select your answer
Question 9/15
Which CSS property will affect both flex and grid designs by adjusting the spacing between elements?
Select your answer
Question 10/15
How do you make a flex container's children items stacked vertically?
Select your answer
Question 11/15
Which CSS property is used to add space between columns in a CSS Grid layout?
Select your answer
Question 12/15
How would you center an element horizontally and vertically inside a flex container?
Select your answer
Question 13/15
Which property is used to define how to distribute space between and around items along the flex container's cross-axis?
Select your answer
Question 14/15
Which of the following CSS properties can be animated?
Select your answer
Question 15/15
Which CSS property is used to specify that grid items should be placed more compactly?
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 CSS Grid, what does the <pre><code>repeat</code></pre> function do?
Available answers
In CSS Grid,
repeat(x, pattern)
is used to repeat the pattern in grid-template-columns or grid-template-rows a specified number of times, simplifying the grid definition process.
Question 2/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
What CSS property applies a 3D perspective effect to elements?
Available answers
The
perspective
property defines the perspective from which an element is viewed, applying a 3D perspective effect.
Question 3/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
When using CSS animations, which property specifies the time an animation takes to complete one cycle?
Available answers
The
animation-duration
property specifies the time it takes for an animation to complete one cycle, an essential part of defining CSS animations.
Question 4/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
Which CSS property allows you to control the wrapping of flex items in a flex container?
Available answers
The
flex-wrap
property allows you to specify whether flex items should wrap onto multiple lines or not. It handles the layout of items in both row and column directions.
Question 5/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
Which CSS property adjusts the alignment of contents of the last line in a flex container?
Available answers
The
align-content
property is used to align flex items on the cross-axis when there is extra space in the container, affecting only how the items are aligned within the entire flex container.
Question 6/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
If an HTML element is using <pre><code>position: absolute;</code></pre>, to what is it positioned relative?
Available answers
An element with
position: absolute;
is positioned relative to its nearest ancestor with a position other than static
. If no such ancestor exists, it is placed relative to the initial containing block (usually the HTML body
).
Question 7/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
What does <pre><code>flex-grow: 0;</code></pre> do to a flex item?
Available answers
Setting
flex-grow: 0;
ensures that the flex item does not grow in size, even if there is available free space in the flex container.
Question 8/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
In CSS Grid, what property would you use to overlap grid items within the same grid cell?
Available answers
To overlap grid items within the same cell or area, you can use the
z-index
property, similarly to how it works in regular CSS layouts, to specify the layering order.
Question 9/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
Which CSS property will affect both flex and grid designs by adjusting the spacing between elements?
Available answers
The
gap
property is widely supported and used in flexbox and grid layouts to create space between elements without applying margin or padding individually.
Question 10/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
How do you make a flex container's children items stacked vertically?
Available answers
By setting
flex-direction: column;
, the flex container's children items are stacked vertically from top to bottom.
Question 11/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
Which CSS property is used to add space between columns in a CSS Grid layout?
Available answers
The
column-gap
property is specifically used in Grid Layout to add space between columns. gap
can be used to set space overall (both rows and columns).
Question 12/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
How would you center an element horizontally and vertically inside a flex container?
Available answers
Using
justify-content: center;
and align-items: center;
will center the element inside the flex container both horizontally and vertically.
Question 13/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
Which property is used to define how to distribute space between and around items along the flex container's cross-axis?
Available answers
The
align-content
property in a flex container is used to distribute space between and around the flex items along the cross-axis (perpendicular to the main axis).
Question 14/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
Which of the following CSS properties can be animated?
Available answers
The
width
property can be animated in CSS to create transitions and effects for changing element sizes.
Question 15/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
Which CSS property is used to specify that grid items should be placed more compactly?
Available answers
The
grid-auto-flow: dense;
property places grid items more compactly, allowing them to fill gaps that appear in the grid, typically by placing smaller items in available spaces.