Why grid is needed in CSS - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a grid container.

CSS

.container {
  display: [1];
}

Drag options to blanks, or click blank then click option'

Agrid

Bblock

Cinline

Dflex

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'block' or 'inline' instead of 'grid' does not create a grid layout.

The display: grid; property turns the container into a grid layout, allowing easy placement of items in rows and columns.

2fill in blank

medium

Complete the code to define two equal columns in the grid.

CSS

.container {
  display: grid;
  grid-template-columns: [1] [2];
}

Drag options to blanks, or click blank then click option'

A1fr

Bauto

C100px

D50%

Attempts:

3 left

💡 Hint

Common Mistakes

Using fixed widths like '100px' or percentages can cause uneven columns.

Using 1fr 1fr divides the container into two equal columns that share available space.

3fill in blank

hard

Fix the error in the grid code to properly set rows.

CSS

.container {
  display: grid;
  grid-template-rows: [1];
}

Drag options to blanks, or click blank then click option'

Arepeat(3, 1fr)

B3 x 1fr

Crepeat(3 1fr)

D3fr

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting the comma inside repeat causes syntax errors.

The correct syntax for repeating rows is repeat(3, 1fr) with a comma separating the count and size.

4fill in blank

hard

Fill both blanks to create a grid with 3 columns and 2 rows.

CSS

.container {
  display: grid;
  grid-template-columns: [1];
  grid-template-rows: [2];
}

Drag options to blanks, or click blank then click option'

A1fr 1fr 1fr

Brepeat(2, 100px)

Crepeat(3, 1fr)

D50px 50px

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing fixed and flexible units incorrectly can cause layout issues.

Using repeat(3, 1fr) creates 3 equal columns, and repeat(2, 100px) creates 2 rows each 100px tall.

5fill in blank

hard

Fill all three blanks to create a grid with 4 columns, 3 rows, and a gap between cells.

CSS

.container {
  display: grid;
  grid-template-columns: [1];
  grid-template-rows: [2];
  gap: [3];
}

Drag options to blanks, or click blank then click option'

Arepeat(4, 1fr)

Brepeat(3, 150px)

C10px

D5px

Attempts:

3 left

💡 Hint

Common Mistakes

Using gap values that are too small or missing gap causes cramped layout.

The code creates 4 equal columns, 3 rows each 150px tall, and a 10px gap between grid cells for spacing.