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

What does the CSS rule

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

mean?

Select your answer

There is one row spanning 400px space.

The grid container has 4 rows that are equally distributed.

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

The grid container has 4 rows of 100px each.

Question 2/15

When does

grid-template-areas

become useful in a grid layout?

Select your answer

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

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

When using many identifiable areas for layout purposes.

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

Question 3/15

What unique value can

grid-template-columns

take to accommodate content's intrinsic size?

Select your answer

auto-fit

minmax()

fill()

fit-content()

Question 4/15

What happens if you do not specify

grid-template-rows

on a grid container?

Select your answer

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

The grid will not be able to display its items.

The grid becomes a flex container instead.

All rows will each be 1fr by default.

Question 5/15

When using

grid-auto-flow: dense;

, what behavior can we expect from the grid container?

Select your answer

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.

Items will span multiple columns.

Question 6/15

How do you define a grid container in CSS?

Select your answer

By setting the

display

property to

block

By using the

grid-template

property.

By adding a

grid

class to an element.

By setting the

display

property to

grid

on an element.

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-gap: 10px;

Using

grid-spacing: 10px;

Question 8/15

Which property would you use to set a grid item's position in both row and column at once?

Select your answer

area-grid

grid-row

and

grid-column

together

grid-template

grid-area

Question 9/15

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

Select your answer

starting-area

grid-area

template-area

area

Question 10/15

If a grid item is set to

grid-column: 2 / 4;

, which columns does it span?

Select your answer

Third to sixth columns.

First to fourth columns, including the fourth.

Second to fourth columns, including the fourth.

Second to third columns, not including the fourth.

Question 11/15

How is a specific grid item sized when using

grid-template-columns

defined as

100px 1fr 2fr

Select your answer

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

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

All columns are of equal 1fr size.

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

Question 12/15

What is the default value of

justify-self

in a grid container?

Select your answer

stretch

end

center

start

Question 13/15

Which keyword allows a grid item to fill the remainder of the space despite other items?

Select your answer

spanning

span

start

end

Question 14/15

Which property controls the alignment of items along the column axis within a grid?

Select your answer

justify-items

align-items

align-columns

grid-align

Question 15/15

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

Select your answer

justify-items

align-items

align-content

grid-align

Your Results

You did not answer any questions correctly.

Your Answers

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

There is one row spanning 400px space.

The grid container has 4 rows that are equally distributed.

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

The grid container has 4 rows of 100px each.

The

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

rule creates 4 rows, each 100px in height.

Question 2/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 all items are the same and distinct areas aren’t needed.

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

When using many identifiable areas for layout purposes.

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

grid-template-areas

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

Question 3/15

😊 Your answer was correct 🙁 Your answer was incorrect

What unique value can <pre><code>grid-template-columns</code></pre> take to accommodate content's intrinsic size?

Available answers

<pre><code>minmax()</code></pre>

<pre><code>fit-content()</code></pre>

The

fit-content()

value allows

grid-template-columns

to be adjusted based on the content's intrinsic size within given constraints.

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

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

The grid will not be able to display its items.

The grid becomes a flex container instead.

All rows will each be 1fr by default.

Without specifying

grid-template-rows

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

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

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.

Items will span multiple columns.

grid-auto-flow: dense;

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

Question 6/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 using the <pre><code>grid-template</code></pre> property.

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

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

A grid container is defined by setting the

display

property to

grid

on an element.

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-gap: 10px;</code></pre>.

Using <pre><code>grid-spacing: 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

Which property would you use to set a grid item's position in both row and column at once?

Available answers

<pre><code>grid-row</code></pre> and <pre><code>grid-column</code></pre> together

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

The

grid-area

property can be used to set where a grid item starts and how many rows and columns it spans in the grid.

Question 9/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>starting-area</code></pre>

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

The

grid-area

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

grid-template-areas

Question 10/15

😊 Your answer was correct 🙁 Your answer was incorrect

If a grid item is set to <pre><code>grid-column: 2 / 4;</code></pre>, which columns does it span?

Available answers

Third to sixth columns.

First to fourth columns, including the fourth.

Second to fourth columns, including the fourth.

Second to third columns, not including the fourth.

The grid item spans from the start of the second column to the start of the fourth column.

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

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

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

All columns are of equal 1fr size.

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

😊 Your answer was correct 🙁 Your answer was incorrect

What is the default value of <pre><code>justify-self</code></pre> in a grid container?

Available answers

stretch

end

center

start

The default value of

justify-self

in a grid item is

stretch

, meaning items stretch to fill the available space.

Question 13/15

😊 Your answer was correct 🙁 Your answer was incorrect

Which keyword allows a grid item to fill the remainder of the space despite other items?

Available answers

spanning

span

start

end

The keyword

span

allows a grid item to extend and fill the remainder of the space in the specified direction.

Question 14/15

😊 Your answer was correct 🙁 Your answer was incorrect

Which property controls the alignment of items along the column axis within a grid?

Available answers

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

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

<pre><code>align-columns</code></pre>

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

The

align-items

property is used to align grid items along the column (block/start) axis.

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

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

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

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

The

justify-items

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