Grid vs flexbox in CSS - Interactive Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to make the container use Flexbox layout.

CSS

.container {
  display: [1];
}

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

Aflex

Bblock

Cgrid

Dinline

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'block' instead of 'flex' does not create a flex container.

Using 'grid' creates a grid layout, not flexbox.

The display: flex; property makes the container use Flexbox layout.

2fill in blank

medium

Complete the code to make the container use Grid layout.

CSS

.container {
  display: [1];
}

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

Ainline

Bflex

Cgrid

Dblock

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'flex' creates a flex container, not a grid.

Using 'block' or 'inline' does not create grid layout.

The display: grid; property makes the container use Grid layout.

3fill in blank

hard

Fix the error in the code to create a 3-column grid layout.

CSS

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

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

A3

Btwo

Cfour

D5

Attempts:

3 left

💡 Hint

Common Mistakes

Using words like 'two' or 'four' instead of numbers causes errors.

Using numbers other than 3 will create a different number of columns.

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

4fill in blank

hard

Fill both blanks to create a flex container that centers items horizontally and vertically.

CSS

.container {
  display: [1];
  justify-content: [2];
  align-items: center;
}

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

Aflex

Bcenter

Cspace-between

Dgrid

Attempts:

3 left

💡 Hint

Common Mistakes

Using display: grid; instead of flexbox.

Using justify-content: space-between; which spreads items apart.

Use display: flex; to create a flex container and justify-content: center; to center items horizontally.

5fill in blank

hard

Fill all three blanks to create a grid container with 2 rows and 3 columns.

CSS

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

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

Aflex

B3

C2

Dgrid

Attempts:

3 left

💡 Hint

Common Mistakes

Using display: flex; instead of grid.

Swapping the numbers for rows and columns.

Use display: grid; to create a grid container with 3 columns and 2 rows.