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 you to control the space between rows in a grid without affecting columns?

Select your answer

gap

align-gap

row-gap

grid-gap

Question 2/15

What does the CSS rule

grid-template-areas: "a a a" "b b c";

indicate?

Select your answer

A grid with 3 rows and 3 columns.

A grid with 2 rows and 2 columns.

A grid with 3 rows and 2 columns.

A grid with 2 rows and 3 columns.

Question 3/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.

The grid will ignore overflow.

Items will span multiple columns.

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

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

What does the CSS rule

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

mean?

Select your answer

The grid container has 4 rows of 100px each.

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.

Question 6/15

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

Select your answer

justify-items

align-items

grid-align

align-columns

Question 7/15

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

Select your answer

end

span

start

spanning

Question 8/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 many identifiable areas for layout purposes.

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

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

Question 9/15

How does the

subgrid

value change grid behavior?

Select your answer

It allows grid within a grid to inherit tracks of the parent grid.

It creates new independent rows/columns within the subgrid.

It prevents any further grid creation within that element.

It produces a grid twice as large as the parent grid.

Question 10/15

Why might

minmax()

be preferred over strict unit definitions in grid layouts?

Select your answer

It ensures every item only has one size possible.

It allows flexibility with responsiveness, setting a range for sizes.

It fixes sizes independently of container space, simplifying design.

It enables text content to overflow grid cells with ease.

Question 11/15

Which CSS rule can define named areas in a grid to simplify template layout?

Select your answer

grid-areas

areas-grid-template

template-named-areas

grid-template-areas

Question 12/15

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

Select your answer

align-content

grid-align

align-items

justify-items

Question 13/15

What unique value can

grid-template-columns

take to accommodate content's intrinsic size?

Select your answer

fit-content()

minmax()

fill()

auto-fit

Question 14/15

What will happen if you set

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

on a grid container?

Select your answer

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

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

The grid container will collapse into a single column.

The grid will not change from its default state.

Question 15/15

Which axis is manipulated by

align-content

in a grid layout?

Select your answer

Neither

Column

Both

Row

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 you to control the space between rows in a grid without affecting columns?

Available answers

<pre><code>align-gap</code></pre>

The

row-gap

property specifically controls the spacing between grid rows without influencing the space between columns.

Question 2/15

😊 Your answer was correct 🙁 Your answer was incorrect

What does the CSS rule <pre><code>grid-template-areas: "a a a" "b b c";</code></pre> indicate?

Available answers

A grid with 3 rows and 3 columns.

A grid with 2 rows and 2 columns.

A grid with 3 rows and 2 columns.

A grid with 2 rows and 3 columns.

The

grid-template-areas

rule defines a grid with two rows: the first row has three columns all with area 'a', and the second row has three columns with two 'b's and one 'c'.

Question 3/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.

The grid will ignore overflow.

Items will span multiple columns.

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

grid-auto-flow: dense;

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

Question 4/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 5/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 of 100px each.

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-template-rows: repeat(4, 100px);

rule creates 4 rows, each 100px in height.

Question 6/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>grid-align</code></pre>

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

The

align-items

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

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

end

span

start

spanning

The keyword

span

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

Question 8/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 many identifiable areas for layout purposes.

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

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

😊 Your answer was correct 🙁 Your answer was incorrect

How does the <pre><code>subgrid</code></pre> value change grid behavior?

Available answers

It allows grid within a grid to inherit tracks of the parent grid.

It creates new independent rows/columns within the subgrid.

It prevents any further grid creation within that element.

It produces a grid twice as large as the parent grid.

The

subgrid

value allows the grid to inherit tracks (rows or columns) from the parent grid, providing coherent alignment.

Question 10/15

😊 Your answer was correct 🙁 Your answer was incorrect

Why might <pre><code>minmax()</code></pre> be preferred over strict unit definitions in grid layouts?

Available answers

It ensures every item only has one size possible.

It allows flexibility with responsiveness, setting a range for sizes.

It fixes sizes independently of container space, simplifying design.

It enables text content to overflow grid cells with ease.

minmax()

is preferred because it allows defining a minimum and maximum size, offering adaptability for responsive designs.

Question 11/15

😊 Your answer was correct 🙁 Your answer was incorrect

Which CSS rule can define named areas in a grid to simplify template layout?

Available answers

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

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

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

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

The

grid-template-areas

rule allows you to assign names to areas, making layout designs more intuitive and readable.

Question 12/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>align-content</code></pre>

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

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

<pre><code>justify-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 13/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>fit-content()</code></pre>

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

The

fit-content()

value allows

grid-template-columns

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

Question 14/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 container will have 3 equally sized columns using available space.

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

The grid container will collapse into a single column.

The grid will not change from its default state.

Using

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

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

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

Neither

Column

Both

Row

The

align-content

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