CSS Layout Techniques Quiz

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.