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

In the CSS Grid, what does the

fr

unit stand for?

Select your answer

Fraction

Frame

Free space

Function

Question 2/15

grid-template-rows: repeat(2, 1fr 200px);

is used, what is the layout structure?

Select your answer

Creates a layout with 4 tracks alternating sizes.

Rounds the row size to nearest 100px.

Generates a single column of items.

Ensures all columns have equal height.

Question 3/15

How do you center a grid item in a cell?

Select your answer

center-content: center;

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

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

grid-center: all;

Question 4/15

What is indicated by

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

Select your answer

Each dot creates a new grid item named '.'

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

The grid contains only one item labeled 'a'.

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

Question 5/15

If a grid container is defined with

display: grid;

, what will happen if no other grid properties are set?

Select your answer

A single row and single column layout will be created.

Items will be evenly distributed in the container.

The grid will not display any items.

The grid items will overlap each other in the first cell.

Question 6/15

What is the default value of

grid-auto-flow

in CSS Grid?

Select your answer

dense

inherit

row

column

Question 7/15

What is achieved by setting

grid-area: 'header header header' 'nav main sidebar' 'footer footer footer';

Select your answer

Aligns grid items to the top of the grid.

Assigns a single grid item multiple areas to cover.

Specifies explicit grid lines for items.

Defines the layout structure using named grid areas.

Question 8/15

What will

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

achieve?

Select your answer

Generates columns with a maximum width of 150px.

Creates three columns with a default width of 100% each.

Defines a fixed width of exactly 150px for three columns.

Creates three columns that are at least 150px and up to equal fractions of the available space.

Question 9/15

What is the effect of setting

grid-auto-flow

dense

Select your answer

Grid items will align to the left.

Grid items will wrap to new rows.

Empty cells in the grid will be filled in first.

The grid layout will shift to center.

Question 10/15

In CSS Grid, what does

display: subgrid;

allow?

Select your answer

Creates an entirely new grid layout overriding parent settings.

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

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

Items are positioned below other grids simultaneously.

Question 11/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 arrange without any gaps.

The items automatically arrange in rows.

Grid items float left to right.

Question 12/15

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

Select your answer

grid-template-areas

grid-column

grid-template

grid-area

Question 13/15

What does a fractional unit

fr

represent in a grid layout?

Select your answer

A fixed size in em units.

An absolute length in pixels.

A percentage of the parent container width.

A fraction of the remaining space inside the grid container.

Question 14/15

If a grid rule

grid-template-columns: 50px auto;

is applied, what will be the effect?

Select your answer

First column is 50px wide; second takes remaining space.

Both columns adjust to auto size at 50px.

The grid will not render due to conflicting definitions.

Columns alternate widths as items are added.

Question 15/15

What does

grid-template-columns: auto 1fr;

imply about the width of the two columns?

Select your answer

Both columns evenly divide the container's width.

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

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

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

Your Results

You did not answer any questions correctly.

Your Answers

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

Fraction

Frame

Free space

Function

The

fr

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

Question 2/15

😊 Your answer was correct 🙁 Your answer was incorrect

If <pre><code>grid-template-rows: repeat(2, 1fr 200px);</code></pre> is used, what is the layout structure?

Available answers

Creates a layout with 4 tracks alternating sizes.

Rounds the row size to nearest 100px.

Generates a single column of items.

Ensures all columns have equal height.

grid-template-rows: repeat(2, 1fr 200px);

results in four row tracks, alternating between sizes 1fr and 200px.

Question 3/15

😊 Your answer was correct 🙁 Your answer was incorrect

How do you center a grid item in a cell?

Available answers

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

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

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

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

Centering a grid item within its respective cell involves setting both

justify-self: center;

and

align-self: center;

Question 4/15

😊 Your answer was correct 🙁 Your answer was incorrect

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

Available answers

Each dot creates a new grid item named '.'

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

The grid contains only one item labeled 'a'.

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

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

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

Question 5/15

😊 Your answer was correct 🙁 Your answer was incorrect

If a grid container is defined with <pre><code>display: grid;</code></pre>, what will happen if no other grid properties are set?

Available answers

A single row and single column layout will be created.

Items will be evenly distributed in the container.

The grid will not display any items.

The grid items will overlap each other in the first cell.

By default, if no dimensions are specified, the grid will create a single row and column where all items will occupy that single grid area line.

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

dense

inherit

row

column

The default value for

grid-auto-flow

row

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

Question 7/15

😊 Your answer was correct 🙁 Your answer was incorrect

What is achieved by setting <pre><code>grid-area: 'header header header' 'nav main sidebar' 'footer footer footer';</code></pre>?

Available answers

Aligns grid items to the top of the grid.

Assigns a single grid item multiple areas to cover.

Specifies explicit grid lines for items.

Defines the layout structure using named grid areas.

grid-template-areas

defines grid layout using named areas, allowing the assignment of these names to specific items with

grid-area

inside grid items.

Question 8/15

😊 Your answer was correct 🙁 Your answer was incorrect

What will <pre><code>grid-template-columns: repeat(3, minmax(150px, 1fr));</code></pre> achieve?

Available answers

Generates columns with a maximum width of 150px.

Creates three columns with a default width of 100% each.

Defines a fixed width of exactly 150px for three columns.

Creates three columns that are at least 150px and up to equal fractions of the available space.

Using

repeat(3, minmax(150px, 1fr));

allows each column to grow from 150px to dividing remaining space equally.

Question 9/15

😊 Your answer was correct 🙁 Your answer was incorrect

What is the effect of setting <pre><code>grid-auto-flow</code></pre> to <pre><code>dense</code></pre>?

Available answers

Grid items will align to the left.

Grid items will wrap to new rows.

Empty cells in the grid will be filled in first.

The grid layout will shift to center.

Setting

grid-auto-flow

dense

fills in the smaller items into empty spaces created due to item sizing, potentially rearranging items out of the order they are defined in the source.

Question 10/15

😊 Your answer was correct 🙁 Your answer was incorrect

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

Available answers

Creates an entirely new grid layout overriding parent settings.

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

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

Items are positioned below other grids simultaneously.

The

display: subgrid;

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

Question 11/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 arrange without any gaps.

The items automatically arrange in rows.

Grid items float left to right.

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

<pre><code>grid-column</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 13/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 fixed size in em units.

An absolute length in pixels.

A percentage of the parent container width.

A fraction of the remaining space inside the grid container.

The

fr

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

Question 14/15

😊 Your answer was correct 🙁 Your answer was incorrect

If a grid rule <pre><code>grid-template-columns: 50px auto;</code></pre> is applied, what will be the effect?

Available answers

First column is 50px wide; second takes remaining space.

Both columns adjust to auto size at 50px.

The grid will not render due to conflicting definitions.

Columns alternate widths as items are added.

grid-template-columns: 50px auto;

sets the first column's width to 50px, while the second adapts to the remaining available space.

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

Both columns evenly divide the container's width.

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

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

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

grid-template-columns: auto 1fr;

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