CSS Layout Techniques Quiz

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.