Loading... Login Loading... Register

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

First Name *

Last Name *

Email *

Password *

Confirm Password *

I agree to the Terms of Service & Privacy Policy.

Add me to your newsletter.

Question 1/15

How would you center an element horizontally and vertically inside a flex container?

Select your answer

align-self: center; justify-content: space-between;

justify-self: center; align-self: center;

justify-content: center; align-items: center;

align-content: center; justify-items: center;

Question 2/15

How do you make a flex container's children items stacked vertically?

Select your answer

flex-wrap: wrap-reverse;

flex-direction: column;

flex-flow: column;

align-content: flex-start;

Question 3/15

Which is the correct syntax to create a 2x2 CSS Grid layout?

Select your answer

grid-template: 1fr / 2fr;

grid: auto / auto;

grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr);

grid-template-columns: 1fr 1fr; grid-template-rows: repeat(1, 2fr);

Question 4/15

In CSS Grid, when using

grid-template-areas

, what does a period (.) signify in the template representation?

Select your answer

An empty cell

Repetition of previous grid item

A discretionary placeholder

An undefined area

Question 5/15

Which CSS property is used to add space between columns in a CSS Grid layout?

Select your answer

grid-gap

gap

spacing

column-gap

Question 6/15

What is the effect of the CSS property

display: none;

on an HTML element?

Select your answer

Applies only to text elements

Hides the element but keeps its spot in the flow

Makes the element visible with zero opacity

Hides the element and removes it from the document flow

Question 7/15

When using CSS Grid, which property specifies the size of a grid item?

Select your answer

grid-column

grid-template-columns

grid-area

grid-template-rows

Question 8/15

In CSS Grid, what property would you use to overlap grid items within the same grid cell?

Select your answer

grid-column-end

z-index

align-self

grid-area

Question 9/15

If an HTML element is using

position: absolute;

, to what is it positioned relative?

Select your answer

The document root

Its immediate parent only

The

body

tag always

The closest ancestor that is not statically positioned

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

flex-grow: 1; flex-shrink: 1;

flex-basis: auto;

flex-direction: row;

flex: 1;

Question 11/15

In CSS Grid, what does the

repeat

function do?

Select your answer

Handles automatic flow of items.

Repeats a pattern across the grid.

Creates multiple areas with the same name.

Duplicates entire template definitions.

Question 12/15

Which of the following properties is NOT specific to CSS Grid Layout?

Select your answer

grid-flow

grid-column-start

grid-template-areas

grid-auto-rows

Question 13/15

What is the main purpose of using the

display: block;

CSS property?

Select your answer

To make text items inline.

To stack elements vertically and occupy the full width of their container.

To make an element contain its children.

To prevent elements from being floated.

Question 14/15

Which CSS property will affect both flex and grid designs by adjusting the spacing between elements?

Select your answer

gap

spacing

padding

margin

Question 15/15

Which CSS feature allows web designers to create grid-based layouts using a two-dimensional system?

Select your answer

Float Layout

CSS Grid

Flexbox

Positioning

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

<pre><code>align-self: center; justify-content: space-between;</code></pre>

<pre><code>justify-self: center; align-self: center;</code></pre>

<pre><code>justify-content: center; align-items: center;</code></pre>

<pre><code>align-content: center; justify-items: center;</code></pre>

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

<pre><code>flex-wrap: wrap-reverse;</code></pre>

<pre><code>flex-direction: column;</code></pre>

<pre><code>flex-flow: column;</code></pre>

<pre><code>align-content: flex-start;</code></pre>

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

<pre><code>grid-template: 1fr / 2fr;</code></pre>

<pre><code>grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr);</code></pre>

<pre><code>grid-template-columns: 1fr 1fr; grid-template-rows: repeat(1, 2fr);</code></pre>

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

An empty cell

Repetition of previous grid item

A discretionary placeholder

An undefined area

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

grid-gap

gap

spacing

column-gap

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

Applies only to text elements

Hides the element but keeps its spot in the flow

Makes the element visible with zero opacity

Hides the element and removes it from the document flow

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

grid-column

grid-template-columns

grid-area

grid-template-rows

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

grid-column-end

z-index

align-self

grid-area

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

The document root

Its immediate parent only

The <pre><code>body</code></pre> tag always

The closest ancestor that is not statically positioned

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

flex-grow: 1; flex-shrink: 1;

flex-basis: auto;

flex-direction: row;

flex: 1;

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

Handles automatic flow of items.

Repeats a pattern across the grid.

Creates multiple areas with the same name.

Duplicates entire template definitions.

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

grid-flow

grid-column-start

grid-template-areas

grid-auto-rows

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

To make text items inline.

To stack elements vertically and occupy the full width of their container.

To make an element contain its children.

To prevent elements from being floated.

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

gap

spacing

padding

margin

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

Float Layout

CSS Grid

Flexbox

Positioning

CSS Grid is a powerful layout system specifically built for creating grid-based, two-dimensional layouts on web pages.