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

What is indicated by

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

Select your answer

Each dot creates a new grid item named '.'

The grid contains only one item labeled 'a'.

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

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

Question 2/15

What will

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

achieve?

Select your answer

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

Generates columns with a maximum width of 150px.

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

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

Question 3/15

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

is used, what is the layout structure?

Select your answer

Generates a single column of items.

Rounds the row size to nearest 100px.

Ensures all columns have equal height.

Creates a layout with 4 tracks alternating sizes.

Question 4/15

How does CSS Grid handle overflow by default if more items exist than defined slots?

Select your answer

Items overflow outside the grid boundary without adjustment.

Extra items are hidden.

They stack vertically in column order.

Extra items flow into additional implicit grid rows.

Question 5/15

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

Select your answer

grid-position: 2;

grid-column: 2 / 3;

grid-row: 1 / span 2;

grid-area: 2;

Question 6/15

What does

grid-template-columns: auto 1fr;

imply about the width of the two columns?

Select your answer

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

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

Both columns evenly divide the container's width.

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

Question 7/15

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

Select your answer

grid-item: 2 / 3 / 5;

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

grid-placement: 2 3 5;

grid span: 2; column span: 3;

Question 8/15

What is the effect of setting

grid-auto-flow

dense

Select your answer

Empty cells in the grid will be filled in first.

Grid items will wrap to new rows.

The grid layout will shift to center.

Grid items will align to the left.

Question 9/15

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

Select your answer

Using

grid-area

property

Using

grid-auto-flow: columns;

property

Using

grid-template-columns

property

Using

grid-auto-columns

property

Question 10/15

Which function in CSS Grid can generate repeating track patterns?

Select your answer

grid-template-repeat()

grid-repeat()

repeat-pattern()

repeat()

Question 11/15

How would you create a grid with 3 rows where the first row is 1fr, the second is 2fr, and the third is 1fr?

Select your answer

grid-template-rows: 1fr 2fr 1fr;

grid-template-rows: 1fr 1fr 2fr;

grid-template-rows: 2fr 1fr 1fr;

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

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

What is the purpose of

justify-content: space-between;

in a grid container?

Select your answer

Align grid items to the container's baseline.

Spacing grid items evenly apart, leaving no extra space at container's ends.

Center rows equally within the grid.

Align all items to the leftmost side of the container.

Question 14/15

What is the default value of

grid-auto-flow

in CSS Grid?

Select your answer

dense

column

inherit

row

Question 15/15

What effect does

align-items: stretch;

have on a CSS Grid?

Select your answer

Grid items stretch to fill their grid area vertically.

Grid items stretch to the width of their container.

Aligns grid items horizontally to the center.

Prevents grid items from wrapping within rows.

Your Results

You did not answer any questions correctly.

Your Answers

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

The grid contains only one item labeled 'a'.

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

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

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

Generates columns with a maximum width of 150px.

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

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

Using

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

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

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

Generates a single column of items.

Rounds the row size to nearest 100px.

Ensures all columns have equal height.

Creates a layout with 4 tracks alternating sizes.

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

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

Question 4/15

😊 Your answer was correct 🙁 Your answer was incorrect

How does CSS Grid handle overflow by default if more items exist than defined slots?

Available answers

Items overflow outside the grid boundary without adjustment.

Extra items are hidden.

They stack vertically in column order.

Extra items flow into additional implicit grid rows.

By default, CSS Grid places additional items in implicit grid rows, creating new grid lines without affecting the explicit grid definition.

Question 5/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-position: 2;</code></pre>

<pre><code>grid-column: 2 / 3;</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 6/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 have an auto width defaulting to the content-size.

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

Both columns evenly divide the container's width.

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

grid-template-columns: auto 1fr;

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

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

Empty cells in the grid will be filled in first.

Grid items will wrap to new rows.

The grid layout will shift to center.

Grid items will align to the left.

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 9/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-area</code></pre> property

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

Using <pre><code>grid-template-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 10/15

😊 Your answer was correct 🙁 Your answer was incorrect

Which function in CSS Grid can generate repeating track patterns?

Available answers

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

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

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

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

The

repeat()

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

Question 11/15

😊 Your answer was correct 🙁 Your answer was incorrect

How would you create a grid with 3 rows where the first row is 1fr, the second is 2fr, and the third is 1fr?

Available answers

<pre><code>grid-template-rows: 1fr 2fr 1fr;</code></pre>

<pre><code>grid-template-rows: 1fr 1fr 2fr;</code></pre>

<pre><code>grid-template-rows: 2fr 1fr 1fr;</code></pre>

<pre><code>grid-template-rows: repeat(3, 1fr);</code></pre>

The property

grid-template-rows: 1fr 2fr 1fr;

correctly sets up the desired proportions for the three rows.

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

😊 Your answer was correct 🙁 Your answer was incorrect

What is the purpose of <pre><code>justify-content: space-between;</code></pre> in a grid container?

Available answers

Align grid items to the container's baseline.

Spacing grid items evenly apart, leaving no extra space at container's ends.

Center rows equally within the grid.

Align all items to the leftmost side of the container.

The

justify-content: space-between;

property sets the items so there's equal space between each one, leaving extra space on the outside edges.

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

column

inherit

row

The default value for

grid-auto-flow

row

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

Question 15/15

😊 Your answer was correct 🙁 Your answer was incorrect

What effect does <pre><code>align-items: stretch;</code></pre> have on a CSS Grid?

Available answers

Grid items stretch to fill their grid area vertically.

Grid items stretch to the width of their container.

Aligns grid items horizontally to the center.

Prevents grid items from wrapping within rows.

align-items: stretch;

stretches grid items such that their full height fits the grid area.