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 CSS rule can define named areas in a grid to simplify template layout?

Select your answer

template-named-areas

areas-grid-template

grid-template-areas

grid-areas

Question 2/15

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

Select your answer

end

spanning

start

span

Question 3/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 fixes sizes independently of container space, simplifying design.

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

It ensures every item only has one size possible.

Question 4/15

How does the

subgrid

value change grid behavior?

Select your answer

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

It creates new independent rows/columns within the subgrid.

It prevents any further grid creation within that element.

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

Question 5/15

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

Select your answer

align-items

align-content

justify-content

justify-items

Question 6/15

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

Select your answer

template-area

area

grid-area

starting-area

Question 7/15

Which axis is manipulated by

align-content

in a grid layout?

Select your answer

Neither

Column

Row

Both

Question 8/15

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

Select your answer

align-items

justify-items

align-content

grid-align

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

grid-template

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

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

All columns are of equal 1fr size.

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

Question 11/15

What is the purpose of the CSS Grid property

grid-template-columns

Select your answer

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

To align items within their grid cells.

To define the number of rows in a grid layout.

To set the gap between grid items.

Question 12/15

When does

grid-template-areas

become useful in a grid layout?

Select your answer

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

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

When using many identifiable areas for layout purposes.

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

Question 13/15

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

Select your answer

grid-align

align-columns

align-items

justify-items

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

The grid will not change from its default state.

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

Question 15/15

If a grid item is set to

grid-column: 2 / 4;

, which columns does it span?

Select your answer

First to fourth columns, including the fourth.

Third to sixth columns.

Second to fourth columns, including the fourth.

Second to third columns, not including the fourth.

Your Results

You did not answer any questions correctly.

Your Answers

Question 1/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>template-named-areas</code></pre>

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

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

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

The

grid-template-areas

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

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

spanning

start

span

The keyword

span

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

Question 3/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 fixes sizes independently of container space, simplifying design.

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

It ensures every item only has one size possible.

minmax()

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

Question 4/15

😊 Your answer was correct 🙁 Your answer was incorrect

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

Available answers

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

It creates new independent rows/columns within the subgrid.

It prevents any further grid creation within that element.

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

The

subgrid

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

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

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

<pre><code>justify-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 6/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 7/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

Row

Both

The

align-content

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

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

<pre><code>justify-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).

Question 9/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 10/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.

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

All columns are of equal 1fr size.

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

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

Question 11/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 define the number and sizes of the columns in a grid layout.

To align items within their grid cells.

To define the number of rows in a grid layout.

To set the gap between grid items.

The

grid-template-columns

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

Question 12/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 using the grid solely for equal sizes, e.g., gallery view.

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

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

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

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

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

The

align-items

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

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

The grid will not change from its default state.

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

First to fourth columns, including the fourth.

Third to sixth columns.

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.