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 property will make a grid item automatically fill the empty spaces in a grid container?

Select your answer

auto-space

space-between

auto-fill

grid-auto-flow: dense;

Question 2/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 3/15

Which of the following is NOT a valid value for

align-items

in flexbox?

Select your answer

space-around

center

flex-end

baseline

Question 4/15

How do you set the default alignment of items along the cross axis in a flex container?

Select your answer

align-content: stretch;

justify-content: center;

align-items: center;

justify-items: stretch;

Question 5/15

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

Select your answer

flex-shrink: 1;

flex-shrink: 0;

flex-wrap: nowrap;

flex-basis: auto;

Question 6/15

Which CSS declaration makes a grid item span multiple columns?

Select your answer

column-span: all;

grid-column: span 2;

grid-column-span

grid-column-start / grid-column-end

Question 7/15

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

Select your answer

flex-basis

flex-grow

flex-direction

flex-shrink

Question 8/15

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

Select your answer

align-items

justify-items

grid-auto-rows

row-gap

Question 9/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 stretch the item to fill the container along the cross axis.

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

It will stack the item on top of similar items.

Question 10/15

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

Select your answer

flex-direction

grid-template-rows / grid-template-columns

grid-template-areas

grid-template

Question 11/15

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

Select your answer

order

flex-direction

z-index

flex-basis

Question 12/15

What does setting

flex-wrap: wrap;

do in flexbox?

Select your answer

It makes the items grow to fill the space.

It aligns items to the center of the container.

It changes the direction of the flex items to row.

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

Question 13/15

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

Select your answer

grid-spacing

grid-gap

gap

cell-gap

Question 14/15

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

Select your answer

grid-span: merge;

cell-merge

grid-column: span;

grid-area

Question 15/15

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

Select your answer

column-gap

row-gap

gap

padding

Your Results

You did not answer any questions correctly.

Your Answers

Question 1/15

😊 Your answer was correct 🙁 Your answer was incorrect

What property will make a grid item automatically fill the empty spaces in a grid container?

Available answers

<pre><code>auto-space</code></pre>

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

<pre><code>grid-auto-flow: dense;</code></pre>

grid-auto-flow: dense;

makes grid items fill empty spaces in a grid, thus allowing items to out of order and fill in gaps.

Question 2/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 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>space-around</code></pre>

<pre><code>center</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

How do you set the default alignment of items along the cross axis in a flex container?

Available answers

<pre><code>align-content: stretch;</code></pre>

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

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

<pre><code>justify-items: stretch;</code></pre>

The default alignment of items along the cross axis in a flex container is controlled by

align-items

, and centering them would be

align-items: center;

Question 5/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: 1;</code></pre>

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

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

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

By setting

flex-shrink: 0;

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

Question 6/15

😊 Your answer was correct 🙁 Your answer was incorrect

Which CSS declaration makes a grid item span multiple columns?

Available answers

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

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

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

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

The

grid-column: span 2;

declaration is used to make a grid item span two columns.

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

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

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

The

flex-basis

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

Question 8/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>align-items</code></pre>

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

The

justify-items

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

Question 9/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 stretch the item to fill the container along the cross axis.

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

It will stack the item on top of similar items.

align-self: stretch;

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

Question 10/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-rows / grid-template-columns</code></pre>

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

<pre><code>grid-template</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 11/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>order</code></pre>

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

<pre><code>z-index</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 12/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 makes the items grow to fill the space.

It aligns items to the center of the container.

It changes the direction of the flex items to row.

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

Setting

flex-wrap: wrap;

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

Question 13/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 14/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>grid-span: merge;</code></pre>

<pre><code>cell-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.

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