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
How would you center an element horizontally and vertically inside a flex container?
Select your answer
Question 2/15
How do you make a flex container's children items stacked vertically?
Select your answer
Question 3/15
Which is the correct syntax to create a 2x2 CSS Grid layout?
Select your answer
Question 4/15
In CSS Grid, when using
grid-template-areas
, what does a period (.) signify in the template representation?
Select your answer
Question 5/15
Which CSS property is used to add space between columns in a CSS Grid layout?
Select your answer
Question 6/15
What is the effect of the CSS property
display: none;
on an HTML element?
Select your answer
Question 7/15
When using CSS Grid, which property specifies the size of a grid 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
If an HTML element is using
position: absolute;
, to what is it positioned relative?
Select your answer
Question 10/15
How would you allow a flex item to grow and shrink as necessary, while maintaining a balanced space among other items?
Select your answer
Question 11/15
In CSS Grid, what does the
repeat
function do?
Select your answer
Question 12/15
Which of the following properties is NOT specific to CSS Grid Layout?
Select your answer
Question 13/15
What is the main purpose of using the
display: block;
CSS property?
Select your answer
Question 14/15
Which CSS property will affect both flex and grid designs by adjusting the spacing between elements?
Select your answer
Question 15/15
Which CSS feature allows web designers to create grid-based layouts using a two-dimensional system?
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
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 2/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 3/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
Which is the correct syntax to create a 2x2 CSS Grid layout?
Available answers
The correct syntax to create a 2x2 grid in CSS is
grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr);
which specifies two columns and two rows, each taking an equal fraction of the space.
Question 4/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
In CSS Grid, when using <pre><code>grid-template-areas</code></pre>, what does a period (.) signify in the template representation?
Available answers
When using
grid-template-areas
, a period (.
) represents an empty cell, signifying that no grid item occupies that space.
Question 5/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 6/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
What is the effect of the CSS property <pre><code>display: none;</code></pre> on an HTML element?
Available answers
The
display: none;
property hides an element and removes it from the document flow, so it occupies no space on the page.
Question 7/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
When using CSS Grid, which property specifies the size of a grid item?
Available answers
The
grid-column
property specifies the size and location of a grid item within a grid layout. It spans across the defined number of columns.
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
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 10/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
How would you allow a flex item to grow and shrink as necessary, while maintaining a balanced space among other items?
Available answers
The short syntax
flex: 1;
allows a flex item to both grow and shrink from a flex-basis of 0. This effectively divides remaining space equally among flex items.
Question 11/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 12/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
Which of the following properties is NOT specific to CSS Grid Layout?
Available answers
The property
grid-flow
does not exist; you may be thinking of grid-auto-flow
, which is a correct grid property. Other options are a part of CSS Grid Layout.
Question 13/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
What is the main purpose of using the <pre><code>display: block;</code></pre> CSS property?
Available answers
The
display: block;
property makes an element take up the full width available and stack vertically, with no other elements beside them.
Question 14/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 15/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
Which CSS feature allows web designers to create grid-based layouts using a two-dimensional system?
Available answers
CSS Grid is a powerful layout system specifically built for creating grid-based, two-dimensional layouts on web pages.