Loading... Login Loading... Register

CSS Grid Layout 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

If a grid has three implicit columns, how can their width be controlled?

Select your answer

Using

grid-template-columns

property

Using

grid-area

property

Using

grid-auto-flow: columns;

property

Using

grid-auto-columns

property

Question 2/15

How do you style a specific grid item in a CSS Grid for both columns and rows?

Select your answer

grid-area: 2 / 2 / 4 / 4;

grid-item: 2 / 3 / 5;

grid-placement: 2 3 5;

grid span: 2; column span: 3;

Question 3/15

What happens when

grid-column: 2 / -1;

is defined on a grid item?

Select your answer

Ends before the second column starts.

The item starts at the second row and finishes at the first row.

The item spans from the second column to the last column.

It has no effect if grid only contains one column.

Question 4/15

How do you explicitly place a grid item in the second line of the grid using CSS?

Select your answer

grid-area: 2;

grid-column: 2 / 3;

grid-row: 1 / span 2;

grid-position: 2;

Question 5/15

What is indicated by

grid-template-areas: 'a . b';

Select your answer

Grid items labeled 'a' and 'b' are arranged with a space in between.

Items labeled 'a' and 'b' are merged into one area.

The grid contains only one item labeled 'a'.

Each dot creates a new grid item named '.'

Question 6/15

Which property defines how grid items start and end within individual grid cells?

Select your answer

grid-column

grid-area

grid-template-areas

grid-template

Question 7/15

What is the default value of

grid-auto-flow

in CSS Grid?

Select your answer

row

dense

inherit

column

Question 8/15

Which function in CSS Grid can generate repeating track patterns?

Select your answer

grid-repeat()

repeat-pattern()

repeat()

grid-template-repeat()

Question 9/15

In the CSS Grid, what does the

fr

unit stand for?

Select your answer

Frame

Function

Fraction

Free space

Question 10/15

How is the grid item order affected by

grid-auto-flow: row;

Select your answer

The item order mirrors the HTML source.

Grid items float left to right.

Grid items arrange without any gaps.

The items automatically arrange in rows.

Question 11/15

What does a fractional unit

fr

represent in a grid layout?

Select your answer

A fraction of the remaining space inside the grid container.

A percentage of the parent container width.

A fixed size in em units.

An absolute length in pixels.

Question 12/15

What does

grid-template-columns: auto 1fr;

imply about the width of the two columns?

Select your answer

First column has a fixed width and the second occupies remaining space.

Both columns have an auto width defaulting to the content-size.

Both columns evenly divide the container's width.

Both columns collapse to zero width if no content occupies them.

Question 13/15

In CSS Grid, what does

display: subgrid;

allow?

Select your answer

Items stick to sub-regions without reflowing the main grid.

Items are positioned below other grids simultaneously.

Creates an entirely new grid layout overriding parent settings.

Grid items inherit and use the grid structure of their parent grid container.

Question 14/15

How do you center a grid item in a cell?

Select your answer

grid-center: all;

justify-self: center; align-self: center;

center-content: center;

align-content: center; justify-content: center;

Question 15/15

Which CSS Grid property is used to define the number of columns in a grid?

Select your answer

grid-area

grid-template-columns

grid-gap

grid-template-rows

Your Results

You did not answer any questions correctly.

Your Answers

Question 1/15

😊 Your answer was correct 🙁 Your answer was incorrect

If a grid has three implicit columns, how can their width be controlled?

Available answers

Using <pre><code>grid-template-columns</code></pre> property

Using <pre><code>grid-area</code></pre> property

Using <pre><code>grid-auto-flow: columns;</code></pre> property

Using <pre><code>grid-auto-columns</code></pre> property

The

grid-auto-columns

property defines the size of implicitly created columns in a CSS Grid.

Question 2/15

😊 Your answer was correct 🙁 Your answer was incorrect

How do you style a specific grid item in a CSS Grid for both columns and rows?

Available answers

<pre><code>grid-placement: 2 3 5;</code></pre>

<pre><code>grid span: 2; column span: 3;</code></pre>

The syntax

grid-area: 2 / 2 / 4 / 4;

translates to: row-start/column-start/row-end/column-end, specifying the traversal across grid cells.

Question 3/15

😊 Your answer was correct 🙁 Your answer was incorrect

What happens when <pre><code>grid-column: 2 / -1;</code></pre> is defined on a grid item?

Available answers

Ends before the second column starts.

The item starts at the second row and finishes at the first row.

The item spans from the second column to the last column.

It has no effect if grid only contains one column.

Using

grid-column: 2 / -1;

the item spans from the second column to the last column line, allowing for dynamic adjustment to grid size.

Question 4/15

😊 Your answer was correct 🙁 Your answer was incorrect

How do you explicitly place a grid item in the second line of the grid using CSS?

Available answers

<pre><code>grid-column: 2 / 3;</code></pre>

<pre><code>grid-position: 2;</code></pre>

grid-column: 2 / 3;

positions the item to start at column line 2 and end at column line 3, effectively placing it in the second column.

Question 5/15

😊 Your answer was correct 🙁 Your answer was incorrect

What is indicated by <pre><code>grid-template-areas: 'a . b';</code></pre>?

Available answers

Grid items labeled 'a' and 'b' are arranged with a space in between.

Items labeled 'a' and 'b' are merged into one area.

The grid contains only one item labeled 'a'.

Each dot creates a new grid item named '.'

grid-template-areas: 'a . b';

defines three columns where 'a' and 'b' are separated by a column with no grid item (indicated by '.').

Question 6/15

😊 Your answer was correct 🙁 Your answer was incorrect

Which property defines how grid items start and end within individual grid cells?

Available answers

<pre><code>grid-column</code></pre>

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

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

grid-column

is used to define the starting and ending column lines for a grid item, determining how it spans across the grid.

Question 7/15

😊 Your answer was correct 🙁 Your answer was incorrect

What is the default value of <pre><code>grid-auto-flow</code></pre> in CSS Grid?

Available answers

row

dense

inherit

column

The default value for

grid-auto-flow

row

, meaning new items are automatically placed in rows following the available grid lines.

Question 8/15

😊 Your answer was correct 🙁 Your answer was incorrect

Which function in CSS Grid can generate repeating track patterns?

Available answers

<pre><code>grid-repeat()</code></pre>

<pre><code>repeat-pattern()</code></pre>

<pre><code>repeat()</code></pre>

<pre><code>grid-template-repeat()</code></pre>

The

repeat()

function allows for repeating track sizes or patterns, simplifying the creation of large layouts with heavy repetition.

Question 9/15

😊 Your answer was correct 🙁 Your answer was incorrect

In the CSS Grid, what does the <pre><code>fr</code></pre> unit stand for?

Available answers

Frame

Function

Fraction

Free space

The

fr

unit stands for 'fraction', which represents a fraction of the available space in the grid container.

Question 10/15

😊 Your answer was correct 🙁 Your answer was incorrect

How is the grid item order affected by <pre><code>grid-auto-flow: row;</code></pre>?

Available answers

The item order mirrors the HTML source.

Grid items float left to right.

Grid items arrange without any gaps.

The items automatically arrange in rows.

With

grid-auto-flow: row;

, items are placed along the rows first, following the order provided in the HTML source, while accommodating space constraints.

Question 11/15

😊 Your answer was correct 🙁 Your answer was incorrect

What does a fractional unit <pre><code>fr</code></pre> represent in a grid layout?

Available answers

A fraction of the remaining space inside the grid container.

A percentage of the parent container width.

A fixed size in em units.

An absolute length in pixels.

The

fr

unit indicates a fraction of the available space not already occupied by fixed-size tracks.

Question 12/15

😊 Your answer was correct 🙁 Your answer was incorrect

What does <pre><code>grid-template-columns: auto 1fr;</code></pre> imply about the width of the two columns?

Available answers

First column has a fixed width and the second occupies remaining space.

Both columns have an auto width defaulting to the content-size.

Both columns evenly divide the container's width.

Both columns collapse to zero width if no content occupies them.

grid-template-columns: auto 1fr;

implies that the first column fits its content width, while the second column takes up the remaining space.

Question 13/15

😊 Your answer was correct 🙁 Your answer was incorrect

In CSS Grid, what does <pre><code>display: subgrid;</code></pre> allow?

Available answers

Items stick to sub-regions without reflowing the main grid.

Items are positioned below other grids simultaneously.

Creates an entirely new grid layout overriding parent settings.

Grid items inherit and use the grid structure of their parent grid container.

The

display: subgrid;

feature lets a nested grid inherit parent tracks, maintaining visual consistency of item alignment.

Question 14/15

😊 Your answer was correct 🙁 Your answer was incorrect

How do you center a grid item in a cell?

Available answers

<pre><code>grid-center: all;</code></pre>

<pre><code>justify-self: center; align-self: center;</code></pre>

<pre><code>center-content: center;</code></pre>

<pre><code>align-content: center; justify-content: center;</code></pre>

Centering a grid item within its respective cell involves setting both

justify-self: center;

and

align-self: center;

Question 15/15

😊 Your answer was correct 🙁 Your answer was incorrect

Which CSS Grid property is used to define the number of columns in a grid?

Available answers

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

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

grid-template-columns

is used to specify the number and sizes of the columns in a CSS Grid layout.