Grid rows and columns in CSS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a grid container with 3 columns.

CSS

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

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

Arepeat(3, 1fr)

Bflex

Cblock

Dinline-grid

Attempts:

3 left

💡 Hint

Common Mistakes

Using flex instead of grid for display.

Not specifying the number of columns correctly.

The grid-template-columns property defines the number of columns in a grid. Using repeat(3, 1fr) creates 3 equal columns.

2fill in blank

medium

Complete the code to create 4 rows each 100 pixels tall.

CSS

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

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

A1fr 1fr 1fr 1fr

Bauto auto auto auto

Crepeat(2, 100px)

D100px 100px 100px 100px

Attempts:

3 left

💡 Hint

Common Mistakes

Using repeat(2, 100px) which creates only 2 rows.

Using auto which sizes rows automatically.

The grid-template-rows property sets the height of each row. Writing 100px 100px 100px 100px creates 4 rows each 100 pixels tall.

3fill in blank

hard

Fix the error in the code to properly define 2 columns and 3 rows.

CSS

.container {
  display: grid;
  grid-template-columns: [1];
  grid-template-rows: repeat(3, 50px);
}

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

Aauto auto auto

Brepeat(3, 1fr)

Crepeat(2, 1fr)

D50px 50px

Attempts:

3 left

💡 Hint

Common Mistakes

Using repeat(3, 1fr) which creates 3 columns instead of 2.

Using fixed pixel sizes for columns when flexible sizes are needed.

The code needs 2 columns, so repeat(2, 1fr) correctly creates 2 equal columns.

4fill in blank

hard

Fill both blanks to create a grid with 3 columns and 2 rows, each column 1fr and each row 150px tall.

CSS

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

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

Arepeat(3, 1fr)

Brepeat(2, 150px)

Crepeat(3, 150px)

Drepeat(2, 1fr)

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up the number of repeats for columns and rows.

Using pixel units for columns instead of fractions.

repeat(3, 1fr) creates 3 equal columns. repeat(2, 150px) creates 2 rows each 150 pixels tall.

5fill in blank

hard

Fill all three blanks to create a grid with 4 columns of 1fr, 3 rows of 100px, and a gap of 10px between rows and columns.

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, 100px)

C10px

D5px

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong repeat counts for columns or rows.

Setting gap to too small or wrong units.

repeat(4, 1fr) creates 4 equal columns. repeat(3, 100px) creates 3 rows each 100 pixels tall. gap: 10px adds space between rows and columns.