Loading... Login Loading... Register

CSS 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 allows grid items to be named and referenced by grid-template-areas?

Select your answer

area

grid-area

template-area

starting-area

Question 2/15

How is a specific grid item sized when using

grid-template-columns

defined as

100px 1fr 2fr

Select your answer

The rule defines just the first column, second and third are calculated automatically.

All columns are of equal 1fr size.

Columns are 100px, double the fractional unit, and equal to 1fr.

Columns are 100px, a fraction of remaining space, and twice the previous fraction.

Question 3/15

What will happen if you set

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

on a grid container?

Select your answer

The grid will not change from its default state.

The grid container will collapse into a single column.

The grid container will have 3 equally sized columns using available space.

The grid container will have 3 columns with fractional units ignored.

Question 4/15

When using

grid-auto-flow: dense;

, what behavior can we expect from the grid container?

Select your answer

Items will span multiple columns.

Grid items are densely packed, filling any available gaps.

Grid items are inserted in the strict order they appear in the source.

The grid will ignore overflow.

Question 5/15

What happens if you do not specify

grid-template-rows

on a grid container?

Select your answer

The grid becomes a flex container instead.

All rows will each be 1fr by default.

The grid will not be able to display its items.

All rows will have a height of 'auto' by default.

Question 6/15

How would you set column gaps while keeping row gaps unaffected?

Select your answer

By using

column-gap

By using

grid-column-spacing

By using

align-column-gap

By using

gap

with a focus only on columns.

Question 7/15

How would you create a gap of 10px between all grid items in a grid container?

Select your answer

Using

gap: 10px;

Using

grid-margin: 10px;

Using

grid-spacing: 10px;

Using

grid-gap: 10px;

Question 8/15

Can we use fractions to define grid column sizes in CSS Grid? Which unit is used?

Select your answer

No, only percentages are supported.

Yes, by using

fraction

Yes, by using

fr

No, only fixed units are allowed.

Question 9/15

How do you define a grid container in CSS?

Select your answer

By setting the

display

property to

block

By setting the

display

property to

grid

on an element.

By using the

grid-template

property.

By adding a

grid

class to an element.

Question 10/15

How could you place a grid item to span across three columns starting from the second column?

Select your answer

grid-column: span 3 / 2;

grid-column: 2 / span 3;

grid-column: 2 / -1;

grid-column-start: 2; grid-column-end: 3;

Question 11/15

What CSS Grid property allows overriding of the grid container’s alignment along the horizontal axis?

Select your answer

grid-align

align-content

justify-items

align-items

Question 12/15

Which axis is manipulated by

align-content

in a grid layout?

Select your answer

Both

Row

Column

Neither

Question 13/15

In the CSS Grid layout, what value of

grid-auto-flow

automatically places items by column?

Select your answer

column

row

dense

none

Question 14/15

What does the CSS rule

grid-template-rows: repeat(4, 100px);

mean?

Select your answer

The grid container has 4 rows that are equally distributed.

The grid container has 4 rows of 100px each.

The grid container has 4 rows spanning the entire grid space.

There is one row spanning 400px space.

Question 15/15

When does

grid-template-areas

become useful in a grid layout?

Select your answer

When the order from the source is maintained in every design.

When all items are the same and distinct areas aren’t needed.

When using many identifiable areas for layout purposes.

When using the grid solely for equal sizes, e.g., gallery view.

Your Results

You did not answer any questions correctly.

Your Answers

Question 1/15

😊 Your answer was correct 🙁 Your answer was incorrect

Which property allows grid items to be named and referenced by grid-template-areas?

Available answers

<pre><code>template-area</code></pre>

<pre><code>starting-area</code></pre>

The

grid-area

property is used to name grid items, which can then be referenced in

grid-template-areas

Question 2/15

😊 Your answer was correct 🙁 Your answer was incorrect

How is a specific grid item sized when using <pre><code>grid-template-columns</code></pre> defined as <pre><code>100px 1fr 2fr</code></pre>?

Available answers

The rule defines just the first column, second and third are calculated automatically.

All columns are of equal 1fr size.

Columns are 100px, double the fractional unit, and equal to 1fr.

Columns are 100px, a fraction of remaining space, and twice the previous fraction.

The columns are set as 100px, 1 fraction of remaining space, and 2 fractions of the remaining space after fixed columns.

Question 3/15

😊 Your answer was correct 🙁 Your answer was incorrect

What will happen if you set <pre><code>grid-template-columns: repeat(3, 1fr);</code></pre> on a grid container?

Available answers

The grid will not change from its default state.

The grid container will collapse into a single column.

The grid container will have 3 equally sized columns using available space.

The grid container will have 3 columns with fractional units ignored.

Using

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

creates a grid with 3 columns that take up equal portions of the available space.

Question 4/15

😊 Your answer was correct 🙁 Your answer was incorrect

When using <pre><code>grid-auto-flow: dense;</code></pre>, what behavior can we expect from the grid container?

Available answers

Items will span multiple columns.

Grid items are densely packed, filling any available gaps.

Grid items are inserted in the strict order they appear in the source.

The grid will ignore overflow.

grid-auto-flow: dense;

ensures the grid tries to fill in the gaps in the layout as much as possible by repositioning items.

Question 5/15

😊 Your answer was correct 🙁 Your answer was incorrect

What happens if you do not specify <pre><code>grid-template-rows</code></pre> on a grid container?

Available answers

The grid becomes a flex container instead.

All rows will each be 1fr by default.

The grid will not be able to display its items.

All rows will have a height of 'auto' by default.

Without specifying

grid-template-rows

, each row will have a height of 'auto', defined by the content inside.

Question 6/15

😊 Your answer was correct 🙁 Your answer was incorrect

How would you set column gaps while keeping row gaps unaffected?

Available answers

By using <pre><code>column-gap</code></pre>.

By using <pre><code>grid-column-spacing</code></pre>.

By using <pre><code>align-column-gap</code></pre>.

By using <pre><code>gap</code></pre> with a focus only on columns.

The

column-gap

property specifically applies gaps between columns without affecting the gaps between rows.

Question 7/15

😊 Your answer was correct 🙁 Your answer was incorrect

How would you create a gap of 10px between all grid items in a grid container?

Available answers

Using <pre><code>gap: 10px;</code></pre>.

Using <pre><code>grid-margin: 10px;</code></pre>.

Using <pre><code>grid-spacing: 10px;</code></pre>.

Using <pre><code>grid-gap: 10px;</code></pre>.

The properties

grid-gap

and

gap

can be used to set the space between grid items.

Question 8/15

😊 Your answer was correct 🙁 Your answer was incorrect

Can we use fractions to define grid column sizes in CSS Grid? Which unit is used?

Available answers

No, only percentages are supported.

Yes, by using <pre><code>fraction</code></pre>.

Yes, by using <pre><code>fr</code></pre>.

No, only fixed units are allowed.

In CSS Grid, the

fr

unit represents a fraction of the available space in the grid container.

Question 9/15

😊 Your answer was correct 🙁 Your answer was incorrect

How do you define a grid container in CSS?

Available answers

By setting the <pre><code>display</code></pre> property to <pre><code>block</code></pre>.

By setting the <pre><code>display</code></pre> property to <pre><code>grid</code></pre> on an element.

By using the <pre><code>grid-template</code></pre> property.

By adding a <pre><code>grid</code></pre> class to an element.

A grid container is defined by setting the

display

property to

grid

on an element.

Question 10/15

😊 Your answer was correct 🙁 Your answer was incorrect

How could you place a grid item to span across three columns starting from the second column?

Available answers

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

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

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

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

Using

grid-column: 2 / span 3;

will make the grid item start at the second column and span across three columns.

Question 11/15

😊 Your answer was correct 🙁 Your answer was incorrect

What CSS Grid property allows overriding of the grid container’s alignment along the horizontal axis?

Available answers

<pre><code>grid-align</code></pre>

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

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

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

The

justify-items

property allows overriding of the grid container’s alignment, dictating how items align along their inline axis (horizontally).

Question 12/15

😊 Your answer was correct 🙁 Your answer was incorrect

Which axis is manipulated by <pre><code>align-content</code></pre> in a grid layout?

Available answers

Both

Row

Column

Neither

The

align-content

property manipulates the vertical or row axis within the grid layout.

Question 13/15

😊 Your answer was correct 🙁 Your answer was incorrect

In the CSS Grid layout, what value of <pre><code>grid-auto-flow</code></pre> automatically places items by column?

Available answers

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

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

Setting

grid-auto-flow

column

allows items to be placed automatically by column.

Question 14/15

😊 Your answer was correct 🙁 Your answer was incorrect

What does the CSS rule <pre><code>grid-template-rows: repeat(4, 100px);</code></pre> mean?

Available answers

The grid container has 4 rows that are equally distributed.

The grid container has 4 rows of 100px each.

The grid container has 4 rows spanning the entire grid space.

There is one row spanning 400px space.

The

grid-template-rows: repeat(4, 100px);

rule creates 4 rows, each 100px in height.

Question 15/15

😊 Your answer was correct 🙁 Your answer was incorrect

When does <pre><code>grid-template-areas</code></pre> become useful in a grid layout?

Available answers

When the order from the source is maintained in every design.

When all items are the same and distinct areas aren’t needed.

When using many identifiable areas for layout purposes.

When using the grid solely for equal sizes, e.g., gallery view.

grid-template-areas

is particularly useful when it helps identify and refer to specific areas to manage a layout cleanly.