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

Which property controls the row alignment of items in a Grid Layout?

Select your answer

grid-auto-rows

justify-items

row-gap

align-items

Question 2/15

How do you make a flex item occupy more space than others in the same row?

Select your answer

align-items

flex-grow

justify-content

order

Question 3/15

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

Select your answer

grid-template

grid-template-areas

flex-direction

grid-template-rows / grid-template-columns

Question 4/15

Which CSS property is used to create a flex container?

Select your answer

grid-template-columns: 1fr 1fr;

display: grid;

display: flex;

flex-direction: row;

Question 5/15

Which property is NOT used to control the spaces between rows and columns in a CSS Grid?

Select your answer

column-gap

gap

padding

row-gap

Question 6/15

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

Select your answer

z-index

order

flex-direction

flex-basis

Question 7/15

If a flex item has

align-self: stretch;

, what will it do?

Select your answer

It will align the item to the start of the container.

It will make the item expand and fill along the main axis.

It will stack the item on top of similar items.

It will stretch the item to fill the container along the cross axis.

Question 8/15

In flexbox, how do you prevent the items from shrinking when the container is too small?

Select your answer

flex-shrink: 0;

flex-shrink: 1;

flex-basis: auto;

flex-wrap: nowrap;

Question 9/15

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

Select your answer

Question 10/15

To create an equally-spaced grid layout with 2 rows and 3 columns, which grid property is essential?

Select your answer

grid-template-areas: 'row col';

grid-column: 3 / 2;

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

grid-auto-flow: auto;

Question 11/15

Which of the following is NOT a valid value for

align-items

in flexbox?

Select your answer

baseline

center

space-around

flex-end

Question 12/15

What property does the CSS Grid use to define spacing between adjacent cells in a grid container?

Select your answer

grid-gap

gap

grid-spacing

cell-gap

Question 13/15

If a flexbox container has

flex-flow: row wrap;

, what does this mean?

Select your answer

Items flow vertically and wrap as needed.

Items flow horizontally but cannot wrap onto new lines.

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

Items are constrained to a single row.

Question 14/15

Which flexbox property centers items along the main axis?

Select your answer

align-content

justify-content

align-items

flex-direction

Question 15/15

Which property is used in grid layout to merge several cells into one?

Select your answer

cell-merge

grid-area

grid-span: merge;

grid-column: span;

Your Results

You did not answer any questions correctly.

Your Answers

Question 1/15

😊 Your answer was correct 🙁 Your answer was incorrect

Which property controls the row alignment of items in a Grid Layout?

Available answers

<pre><code>justify-items</code></pre>

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

The

justify-items

property controls the alignment of grid items along the inline (row) axis within their grid area.

Question 2/15

😊 Your answer was correct 🙁 Your answer was incorrect

How do you make a flex item occupy more space than others in the same row?

Available answers

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

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

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

The

flex-grow

property is used to specify how much a flex item will grow relative to the rest of the flex items in the same container.

Question 3/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>grid-template</code></pre>

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

<pre><code>flex-direction</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 4/15

😊 Your answer was correct 🙁 Your answer was incorrect

Which CSS property is used to create a flex container?

Available answers

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

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

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

<pre><code>flex-direction: row;</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 5/15

😊 Your answer was correct 🙁 Your answer was incorrect

Which property is NOT used to control the spaces between rows and columns in a CSS Grid?

Available answers

<pre><code>column-gap</code></pre>

<pre><code>padding</code></pre>

padding

applies space inside an element's border, not specifically between rows and columns in a grid. For grids, you'd use

gap

row-gap

, or

column-gap

Question 6/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>z-index</code></pre>

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

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

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

The

order

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

Question 7/15

😊 Your answer was correct 🙁 Your answer was incorrect

If a flex item has <pre><code>align-self: stretch;</code></pre>, what will it do?

Available answers

It will align the item to the start of the container.

It will make the item expand and fill along the main axis.

It will stack the item on top of similar items.

It will stretch the item to fill the container along the cross axis.

align-self: stretch;

makes a flex item stretch to fill the container along the cross axis.

Question 8/15

😊 Your answer was correct 🙁 Your answer was incorrect

In flexbox, how do you prevent the items from shrinking when the container is too small?

Available answers

<pre><code>flex-shrink: 0;</code></pre>

<pre><code>flex-shrink: 1;</code></pre>

<pre><code>flex-basis: auto;</code></pre>

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

By setting

flex-shrink: 0;

, you prevent flex items from shrinking below their initial size when the container is too small.

Question 9/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 10/15

😊 Your answer was correct 🙁 Your answer was incorrect

To create an equally-spaced grid layout with 2 rows and 3 columns, which grid property is essential?

Available answers

<pre><code>grid-template-areas: 'row col';</code></pre>

<pre><code>grid-column: 3 / 2;</code></pre>

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

To define a layout with 2 rows and 3 columns of equal size, use

grid-template-rows

and

grid-template-columns

with fractional units like

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

Question 11/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>baseline</code></pre>

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

<pre><code>space-around</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 12/15

😊 Your answer was correct 🙁 Your answer was incorrect

What property does the CSS Grid use to define spacing between adjacent cells in a grid container?

Available answers

<pre><code>grid-spacing</code></pre>

The

gap

property in CSS Grid is used to define the space (spacing) between adjacent tracks, rows, or columns in the grid container.

Question 13/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 vertically and wrap as needed.

Items flow horizontally but cannot wrap onto new lines.

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

Items are constrained to a single row.

flex-flow: row wrap;

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

Question 14/15

😊 Your answer was correct 🙁 Your answer was incorrect

Which flexbox property centers items along the main axis?

Available answers

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

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

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

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

The

justify-content

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

Question 15/15

😊 Your answer was correct 🙁 Your answer was incorrect

Which property is used in grid layout to merge several cells into one?

Available answers

<pre><code>cell-merge</code></pre>

<pre><code>grid-span: merge;</code></pre>

<pre><code>grid-column: span;</code></pre>

grid-area

can be used to merge multiple grid cells into a single item by specifying row and column start and end lines.