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

grid-auto-flow: dense;

auto-fill

auto-space

space-between

Question 2/15

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

Select your answer

row-gap

align-items

justify-items

grid-auto-rows

Question 3/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 aligns items to the center of the container.

It makes the items grow to fill the space.

It changes the direction of the flex items to row.

Question 4/15

Which CSS property is used to create a flex container?

Select your answer

display: flex;

flex-direction: row;

display: grid;

grid-template-columns: 1fr 1fr;

Question 5/15

Which CSS declaration makes a grid item span multiple columns?

Select your answer

grid-column-span

column-span: all;

grid-column: span 2;

grid-column-start / grid-column-end

Question 6/15

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

Select your answer

justify-items: stretch;

justify-content: center;

align-items: center;

align-content: stretch;

Question 7/15

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

Select your answer

grid-columns: 3 * 100px;

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

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

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

Question 8/15

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

Select your answer

grid-column: span;

grid-span: merge;

grid-area

cell-merge

Question 9/15

If a flexbox container has

flex-flow: row wrap;

, what does this mean?

Select your answer

Items are constrained to a single row.

Items flow horizontally but cannot wrap onto new lines.

Items flow vertically and wrap as needed.

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

Question 10/15

If a flex item has

align-self: stretch;

, what will it do?

Select your answer

It will stack the item on top of similar items.

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

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

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

Question 11/15

Which flexbox property centers items along the main axis?

Select your answer

justify-content

align-items

flex-direction

align-content

Question 12/15

What is the default value for

grid-auto-flow

in CSS Grid Layout?

Select your answer

row dense

column

row

dense

Question 13/15

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

Select your answer

align-items

order

flex-grow

justify-content

Question 14/15

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

Select your answer

cell-gap

grid-spacing

grid-gap

gap

Question 15/15

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

Select your answer

order

z-index

flex-direction

flex-basis

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>grid-auto-flow: dense;</code></pre>

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

<pre><code>space-between</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 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 3/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 aligns items to the center of the container.

It makes the items grow to fill the space.

It changes the direction of the flex items to row.

Setting

flex-wrap: wrap;

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

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>display: flex;</code></pre>

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

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

<pre><code>grid-template-columns: 1fr 1fr;</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 CSS declaration makes a grid item span multiple columns?

Available answers

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

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

<pre><code>grid-column: span 2;</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 6/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>justify-items: stretch;</code></pre>

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

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

<pre><code>align-content: 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 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-columns: 3 * 100px;</code></pre>

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

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

<pre><code>grid-template-areas: [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 property is used in grid layout to merge several cells into one?

Available answers

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

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

<pre><code>cell-merge</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 9/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 are constrained to a single row.

Items flow horizontally but cannot wrap onto new lines.

Items flow vertically and wrap as needed.

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 10/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 stack the item on top of similar items.

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

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

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

align-self: stretch;

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

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

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

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

The

justify-content

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

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

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

<pre><code>justify-content</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 14/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 15/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>z-index</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.