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 is the purpose of the CSS Grid property

grid-template-columns

Select your answer

To align items within their grid cells.

To define the number of rows in a grid layout.

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

To set the gap between grid items.

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

All rows will each be 1fr by default.

The grid becomes a flex container instead.

Question 3/15

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

Select your answer

Yes, by using

fr

No, only fixed units are allowed.

Yes, by using

fraction

No, only percentages are supported.

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

Which axis is manipulated by

align-content

in a grid layout?

Select your answer

Neither

Column

Both

Row

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

Question 7/15

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

Select your answer

grid-template-areas

areas-grid-template

grid-areas

template-named-areas

Question 8/15

In the CSS Grid layout, what value of

grid-auto-flow

automatically places items by column?

Select your answer

row

column

none

dense

Question 9/15

How is a specific grid item sized when using

grid-template-columns

defined as

100px 1fr 2fr

Select your answer

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.

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

Question 10/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 will not change from its default state.

The grid container will collapse into a single column.

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

Question 11/15

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

Select your answer

Using

grid-gap: 10px;

Using

grid-margin: 10px;

Using

grid-spacing: 10px;

Using

gap: 10px;

Question 12/15

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

Select your answer

justify-content

justify-items

align-items

align-content

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

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

Select your answer

grid-area

grid-row

and

grid-column

together

grid-template

area-grid

Question 15/15

What is the default value of

justify-self

in a grid container?

Select your answer

start

stretch

center

end

Your Results

You did not answer any questions correctly.

Your Answers

Question 1/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 align items within their grid cells.

To define the number of rows in a grid layout.

To define the number and sizes of the columns 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 2/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.

All rows will each be 1fr by default.

The grid becomes a flex container instead.

Without specifying

grid-template-rows

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

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

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

No, only fixed units are allowed.

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

No, only percentages are supported.

In CSS Grid, the

fr

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

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

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

minmax()

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

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

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

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

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

The

grid-template-areas

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

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

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

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

Question 10/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 will not change from its default state.

The grid container will collapse into a single column.

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

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

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

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

The properties

grid-gap

and

gap

can be used to set the space between grid items.

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

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

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

The

justify-content

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

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

start

stretch

center

end

The default value of

justify-self

in a grid item is

stretch

, meaning items stretch to fill the available space.