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-areas: "a a a" "b b c";

indicate?

Select your answer

A grid with 3 rows and 2 columns.

A grid with 3 rows and 3 columns.

A grid with 2 rows and 2 columns.

A grid with 2 rows and 3 columns.

Question 2/15

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

Select your answer

area

starting-area

grid-area

template-area

Question 3/15

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

Select your answer

align-items

align-columns

justify-items

grid-align

Question 4/15

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

Select your answer

justify-items

grid-align

align-items

align-content

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 have a height of 'auto' by default.

The grid will not be able to display its items.

All rows will each be 1fr by default.

Question 6/15

What will happen if you set

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

on a grid container?

Select your answer

The grid container will collapse into a single column.

The grid will not change from its default state.

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

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

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

Which property defines the default alignment of grid items along the row axis across the entire grid?

Select your answer

justify-content

align-items

align-content

justify-items

Question 9/15

Why might

minmax()

be preferred over strict unit definitions in grid layouts?

Select your answer

It enables text content to overflow grid cells with ease.

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

It ensures every item only has one size possible.

It fixes sizes independently of container space, simplifying design.

Question 10/15

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

Select your answer

By using

align-column-gap

By using

column-gap

By using

grid-column-spacing

By using

gap

with a focus only on columns.

Question 11/15

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

Select your answer

end

start

span

spanning

Question 12/15

What is the purpose of the CSS Grid property

grid-template-columns

Select your answer

To set the gap between grid items.

To define the number of rows in a grid layout.

To define the number and sizes of the columns in a grid layout.

To align items within their grid cells.

Question 13/15

When using

grid-auto-flow: dense;

, what behavior can we expect from the grid container?

Select your answer

The grid will ignore overflow.

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

Grid items are densely packed, filling any available gaps.

Items will span multiple columns.

Question 14/15

What unique value can

grid-template-columns

take to accommodate content's intrinsic size?

Select your answer

minmax()

fill()

auto-fit

fit-content()

Question 15/15

What is the default value of

justify-self

in a grid container?

Select your answer

end

stretch

center

start

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-areas: "a a a" "b b c";</code></pre> indicate?

Available answers

A grid with 3 rows and 2 columns.

A grid with 3 rows and 3 columns.

A grid with 2 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 2/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 3/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>align-items</code></pre>

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

<pre><code>justify-items</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 4/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>grid-align</code></pre>

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

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

The

justify-items

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

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 have a height of 'auto' by default.

The grid will not be able to display its items.

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 6/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 collapse into a single column.

The grid will not change from its default state.

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

😊 Your answer was correct 🙁 Your answer was incorrect

Which property defines the default alignment of grid items along the row axis across the entire grid?

Available answers

<pre><code>justify-content</code></pre>

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

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

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

The

justify-content

property defines the default alignment of grid items along the row axis across the entire grid.

Question 9/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 enables text content to overflow grid cells with ease.

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

It ensures every item only has one size possible.

It fixes sizes independently of container space, simplifying design.

minmax()

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

Question 10/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>align-column-gap</code></pre>.

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

By using <pre><code>grid-column-spacing</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 11/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

start

span

spanning

The keyword

span

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

Question 12/15

😊 Your answer was correct 🙁 Your answer was incorrect

What is the purpose of the CSS Grid property <pre><code>grid-template-columns</code></pre>?

Available answers

To set the gap between grid items.

To define the number of rows in a grid layout.

To define the number and sizes of the columns in a grid layout.

To align items within their grid cells.

The

grid-template-columns

property specifies the number of columns and their sizes in the grid layout.

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

The grid will ignore overflow.

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

Grid items are densely packed, filling any available gaps.

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

end

stretch

center

start

The default value of

justify-self

in a grid item is

stretch

, meaning items stretch to fill the available space.