Grid gap in CSS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add space between grid items using the correct property.

CSS

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

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

Apadding

Bgrid-gap

Cmargin

Dgap

Attempts:

3 left

💡 Hint

Common Mistakes

Using margin or padding on the container instead of gap.

Using the deprecated grid-gap property.

The gap property adds space between grid items in CSS Grid layouts. It is the modern and recommended way to set gaps.

2fill in blank

medium

Complete the code to set a vertical gap of 2rem between grid rows.

CSS

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

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

A0.5rem

B1rem

C2rem

D3rem

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping the order of row and column gap values.

Using only one value when two are needed.

The gap property can take two values: the first is the row gap (vertical), the second is the column gap (horizontal). Here, 2rem sets vertical spacing.

3fill in blank

hard

Fix the error in the code to correctly add a 10px gap between grid items.

CSS

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

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

Agrid-gap-size

Bgap

Cgrid-gap

Dgrid-gap-width

Attempts:

3 left

💡 Hint

Common Mistakes

Using non-existent properties like grid-gap-size or grid-gap-width.

Using the deprecated grid-gap property.

The correct modern property to set gaps in CSS Grid is gap. Older grid-gap is deprecated, and the others are invalid.

4fill in blank

hard

Fill both blanks to create a grid with 3 columns and a 1.5rem gap between rows and 2rem gap between columns.

CSS

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

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

A3

B2

C1.5rem

D1rem

Attempts:

3 left

💡 Hint

Common Mistakes

Confusing the order of gap values.

Using wrong numbers for columns.

The repeat(3, 1fr) creates 3 equal columns. The gap property sets 1.5rem vertical and 2rem horizontal spacing.

5fill in blank

hard

Fill all three blanks to create a grid with 4 columns, a 2rem row gap, and a 1rem column gap.

CSS

.grid-wrapper {
  display: grid;
  grid-template-columns: repeat([1], 1fr);
  gap: [2] [3];
}

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

A4

B2rem

C1rem

D3rem

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping row and column gap values.

Using incorrect number of columns.

This code sets 4 equal columns with repeat(4, 1fr). The gap property sets 2rem vertical and 1rem horizontal spacing.