Grid container in CSS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to make the container a grid container.

CSS

container {
  display: [1];
}

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

Ablock

Bflex

Cinline

Dgrid

Attempts:

3 left

💡 Hint

Common Mistakes

Using display: flex; instead of grid.

Forgetting to set the display property.

The display property set to grid makes the container a grid container.

2fill in blank

medium

Complete the code to create three equal columns in the grid container.

CSS

container {
  display: grid;
  grid-template-columns: repeat([1], 1fr);
}

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

A3

B2

C4

Dauto

Attempts:

3 left

💡 Hint

Common Mistakes

Using repeat(2, 1fr) which creates only two columns.

Using auto inside repeat() which is invalid.

The repeat(3, 1fr) creates three equal columns in the grid.

3fill in blank

hard

Fix the error in the code to properly define the grid container with two rows.

CSS

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

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

Arepeat(2, 1fr)

B100px, 200px

Crepeat(2 1fr)

D100px 200px

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting the comma inside repeat().

Using commas between sizes without repeat().

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

4fill in blank

hard

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

CSS

container {
  display: [1];
  grid-template-columns: repeat([2], 1fr);
  grid-template-rows: repeat(2, 100px);
}

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

Agrid

Bflex

C3

D4

Attempts:

3 left

💡 Hint

Common Mistakes

Using flex instead of grid for display.

Setting the wrong number of columns.

Setting display: grid; makes the container a grid. Using repeat(4, 1fr) creates 4 equal columns.

5fill in blank

hard

Fill all three blanks to create a grid container with 3 columns, 2 rows, and a 10px gap between grid items.

CSS

container {
  display: [1];
  grid-template-columns: repeat([2], 1fr);
  grid-gap: [3];
  grid-template-rows: repeat(2, 150px);
}

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

Agrid

B3

C10px

Dflex

Attempts:

3 left

💡 Hint

Common Mistakes

Using flex instead of grid for display.

Forgetting the comma in repeat().

Using invalid units for gap.

Use display: grid; to create a grid container, repeat(3, 1fr) for three columns, and grid-gap: 10px; to add space between items.