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

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

Select your answer

grid-column: 2 / 3;

grid-row: 1 / span 2;

grid-area: 2;

grid-position: 2;

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

Align all items to the leftmost side of the container.

Center rows equally within the grid.

Question 3/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 4/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: repeat(3, 1fr);

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

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

Which function in CSS Grid can generate repeating track patterns?

Select your answer

repeat-pattern()

grid-template-repeat()

grid-repeat()

repeat()

Question 7/15

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

Select your answer

grid-column

grid-template-areas

grid-template

grid-area

Question 8/15

Which CSS property controls the size of the rows and columns in terms of minimum and maximum sizes?

Select your answer

grid-auto-columns

grid-auto-rows

grid-template-areas

minmax()

Question 9/15

If a grid container is defined with

display: grid;

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

Select your answer

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

Items will be evenly distributed in the container.

A single row and single column layout will be created.

The grid will not display any items.

Question 10/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 with a default width of 100% each.

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

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

What effect does

align-items: stretch;

have on a CSS Grid?

Select your answer

Grid items stretch to the width of their container.

Prevents grid items from wrapping within rows.

Aligns grid items horizontally to the center.

Grid items stretch to fill their grid area vertically.

Question 13/15

What is achieved by setting

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

Select your answer

Defines the layout structure using named grid areas.

Assigns a single grid item multiple areas to cover.

Specifies explicit grid lines for items.

Aligns grid items to the top of the grid.

Question 14/15

How can you create equal-width columns that adjust to the layout size using CSS Grid?

Select your answer

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

grid-template-columns: auto auto;

grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));

grid-template-columns: 1fr 1fr;

Question 15/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 span: 2; column span: 3;

grid-item: 2 / 3 / 5;

grid-placement: 2 3 5;

Your Results

You did not answer any questions correctly.

Your Answers

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

Align all items to the leftmost side of the container.

Center rows equally within the grid.

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 3/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 4/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: repeat(3, 1fr);</code></pre>

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

The property

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

correctly sets up the desired proportions for the three rows.

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

😊 Your answer was correct 🙁 Your answer was incorrect

Which function in CSS Grid can generate repeating track patterns?

Available answers

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

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

<pre><code>grid-repeat()</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 7/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 8/15

😊 Your answer was correct 🙁 Your answer was incorrect

Which CSS property controls the size of the rows and columns in terms of minimum and maximum sizes?

Available answers

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

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

<pre><code>minmax()</code></pre>

minmax(min, max)

is used to define a size range greater than or equal to

min

and less than or equal to

max

for grid tracks.

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

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

Items will be evenly distributed in the container.

A single row and single column layout will be created.

The grid will not display any items.

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 10/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 with a default width of 100% each.

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 11/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 12/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 the width of their container.

Prevents grid items from wrapping within rows.

Aligns grid items horizontally to the center.

Grid items stretch to fill their grid area vertically.

align-items: stretch;

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

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

Defines the layout structure using named grid areas.

Assigns a single grid item multiple areas to cover.

Specifies explicit grid lines for items.

Aligns grid items to the top of the grid.

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

😊 Your answer was correct 🙁 Your answer was incorrect

How can you create equal-width columns that adjust to the layout size using CSS Grid?

Available answers

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

<pre><code>grid-template-columns: auto auto;</code></pre>

<pre><code>grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));</code></pre>

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

Using either

grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));

grid-template-columns: 1fr 1fr;

ensures columns are responsive, adapting to the overall container size.

Question 15/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 span: 2; column span: 3;</code></pre>

<pre><code>grid-placement: 2 3 5;</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.