Loading... Login Loading... Register

CSS Flexbox vs Grid 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

What's the function of the

grid

property in CSS?

Select your answer

To define the entire grid layout in shorthand notation.

To specify the number of grid columns only.

To align grid items along the grid lines.

To automatically resize grid items to fit the container.

Question 2/15

If a flexbox container has

flex-flow: row wrap;

, what does this mean?

Select your answer

Items flow horizontally but cannot wrap onto new lines.

Items flow vertically and wrap as needed.

Items are constrained to a single row.

Items are displayed in rows and can wrap onto the next line as needed.

Question 3/15

Which of the following is NOT a valid value for

align-items

in flexbox?

Select your answer

center

space-around

baseline

flex-end

Question 4/15

What CSS property allows you to change the order of flex items?

Select your answer

flex-basis

z-index

flex-direction

order

Question 5/15

What value of

justify-content

will evenly distribute flex items with equal space around them?

Select your answer

space-between

space-around

space-evenly

center

Question 6/15

Which unit is typically used in CSS Grid for flexible lengths?

Select your answer

Question 7/15

Which syntax defines a grid with three columns, each 100px wide?

Select your answer

grid-template-areas: [100px 100px 100px];

grid-columns: 3 * 100px;

grid-template-columns: [100px] 3;

grid-template-columns: 100px 100px 100px;

Question 8/15

Which CSS property is used to define rows and columns in a grid container?

Select your answer

flex-direction

grid-template-areas

grid-template

grid-template-rows / grid-template-columns

Question 9/15

What value of

flex-direction

will make a flex container display items vertically?

Select your answer

column

row

inline

vertical

Question 10/15

Which flex property defines the initial main size of a flex item?

Select your answer

flex-direction

flex-shrink

flex-basis

flex-grow

Question 11/15

Which CSS property is used to specify the size of a grid item?

Select your answer

grid-template-areas

grid-layout

grid-column-end

grid-area

Question 12/15

What is the default value for

grid-auto-flow

in CSS Grid Layout?

Select your answer

row

row dense

column

dense

Question 13/15

Which CSS property is used to create a flex container?

Select your answer

flex-direction: row;

grid-template-columns: 1fr 1fr;

display: grid;

display: flex;

Question 14/15

What does setting

flex-wrap: wrap;

do in flexbox?

Select your answer

It allows items to move to the next line when needed.

It changes the direction of the flex items to row.

It makes the items grow to fill the space.

It aligns items to the center of the container.

Question 15/15

Which flexbox property centers items along the main axis?

Select your answer

justify-content

align-content

flex-direction

align-items

Your Results

You did not answer any questions correctly.

Your Answers

Question 1/15

😊 Your answer was correct 🙁 Your answer was incorrect

What's the function of the <pre><code>grid</code></pre> property in CSS?

Available answers

To define the entire grid layout in shorthand notation.

To specify the number of grid columns only.

To align grid items along the grid lines.

To automatically resize grid items to fit the container.

The

grid

property can be used as a shorthand to define grid template areas, columns, and rows, potentially setting the entire grid layout.

Question 2/15

😊 Your answer was correct 🙁 Your answer was incorrect

If a flexbox container has <pre><code>flex-flow: row wrap;</code></pre>, what does this mean?

Available answers

Items flow horizontally but cannot wrap onto new lines.

Items flow vertically and wrap as needed.

Items are constrained to a single row.

Items are displayed in rows and can wrap onto the next line as needed.

flex-flow: row wrap;

means items are laid out in a row and can wrap onto new lines if needed.

Question 3/15

😊 Your answer was correct 🙁 Your answer was incorrect

Which of the following is NOT a valid value for <pre><code>align-items</code></pre> in flexbox?

Available answers

<pre><code>center</code></pre>

<pre><code>space-around</code></pre>

<pre><code>baseline</code></pre>

space-around

is not a valid value for

align-items

; it is a value for

justify-content

. Valid values for

align-items

include

center

baseline

, and

flex-end

Question 4/15

😊 Your answer was correct 🙁 Your answer was incorrect

What CSS property allows you to change the order of flex items?

Available answers

<pre><code>flex-basis</code></pre>

<pre><code>z-index</code></pre>

<pre><code>flex-direction</code></pre>

<pre><code>order</code></pre>

The

order

property allows you to change the order of flex items within the same container.

Question 5/15

😊 Your answer was correct 🙁 Your answer was incorrect

What value of <pre><code>justify-content</code></pre> will evenly distribute flex items with equal space around them?

Available answers

<pre><code>space-between</code></pre>

<pre><code>space-around</code></pre>

<pre><code>space-evenly</code></pre>

<pre><code>center</code></pre>

justify-content: space-around;

will evenly distribute flex items with equal space around each item.

Question 6/15

😊 Your answer was correct 🙁 Your answer was incorrect

Which unit is typically used in CSS Grid for flexible lengths?

Available answers

The

fr

unit represents a fraction of the available space in a grid container, making it excellent for flexible layout design.

Question 7/15

😊 Your answer was correct 🙁 Your answer was incorrect

Which syntax defines a grid with three columns, each 100px wide?

Available answers

<pre><code>grid-template-areas: [100px 100px 100px];</code></pre>

<pre><code>grid-columns: 3 * 100px;</code></pre>

<pre><code>grid-template-columns: [100px] 3;</code></pre>

<pre><code>grid-template-columns: 100px 100px 100px;</code></pre>

The syntax

grid-template-columns: 100px 100px 100px;

specifies three columns each with a width of 100px.

Question 8/15

😊 Your answer was correct 🙁 Your answer was incorrect

Which CSS property is used to define rows and columns in a grid container?

Available answers

<pre><code>flex-direction</code></pre>

<pre><code>grid-template-areas</code></pre>

<pre><code>grid-template</code></pre>

<pre><code>grid-template-rows / grid-template-columns</code></pre>

The properties

grid-template-rows

and

grid-template-columns

are used to specify the sizes of rows and columns in a grid layout.

Question 9/15

😊 Your answer was correct 🙁 Your answer was incorrect

What value of <pre><code>flex-direction</code></pre> will make a flex container display items vertically?

Available answers

<pre><code>column</code></pre>

<pre><code>inline</code></pre>

<pre><code>vertical</code></pre>

The

flex-direction: column;

property makes the flex container display its items in a vertical flow.

Question 10/15

😊 Your answer was correct 🙁 Your answer was incorrect

Which flex property defines the initial main size of a flex item?

Available answers

<pre><code>flex-direction</code></pre>

<pre><code>flex-shrink</code></pre>

<pre><code>flex-basis</code></pre>

The

flex-basis

property defines the initial main size of a flex item, before any space distribution occurs.

Question 11/15

😊 Your answer was correct 🙁 Your answer was incorrect

Which CSS property is used to specify the size of a grid item?

Available answers

<pre><code>grid-template-areas</code></pre>

<pre><code>grid-layout</code></pre>

<pre><code>grid-column-end</code></pre>

None of the options provided are correct for specifying the size of a grid item. Typically,

grid-column

and

grid-row

along with

grid-template-columns

and

grid-template-rows

are used to specify grid item sizes.

Question 12/15

😊 Your answer was correct 🙁 Your answer was incorrect

What is the default value for <pre><code>grid-auto-flow</code></pre> in CSS Grid Layout?

Available answers

<pre><code>row dense</code></pre>

<pre><code>column</code></pre>

<pre><code>dense</code></pre>

The default value for

grid-auto-flow

row

, which means it places items by filling rows before columns.

Question 13/15

😊 Your answer was correct 🙁 Your answer was incorrect

Which CSS property is used to create a flex container?

Available answers

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

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

<pre><code>display: grid;</code></pre>

<pre><code>display: flex;</code></pre>

The property

display: flex;

is used to define a flex container, enabling the use of all the flex properties on its children.

Question 14/15

😊 Your answer was correct 🙁 Your answer was incorrect

What does setting <pre><code>flex-wrap: wrap;</code></pre> do in flexbox?

Available answers

It allows items to move to the next line when needed.

It changes the direction of the flex items to row.

It makes the items grow to fill the space.

It aligns items to the center of the container.

Setting

flex-wrap: wrap;

allows flex items to wrap onto multiple lines as needed, rather than fitting into a single line.

Question 15/15

😊 Your answer was correct 🙁 Your answer was incorrect

Which flexbox property centers items along the main axis?

Available answers

<pre><code>justify-content</code></pre>

<pre><code>align-content</code></pre>

<pre><code>flex-direction</code></pre>

<pre><code>align-items</code></pre>

The

justify-content

property is used to align flex items along the main axis.