Display property in CSS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to make the element a block-level element.

CSS

div {
  display: [1];
}

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

Ablock

Binline

Cnone

Dflex

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'inline' which does not make the element block-level.

Using 'none' which hides the element.

The block value makes the element a block-level element, which takes the full width available.

2fill in blank

medium

Complete the code to hide the element from the page.

CSS

.hidden {
  display: [1];
}

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

Ablock

Binline

Cnone

Dflex

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'block' which shows the element.

Using 'inline' which shows the element inline.

The none value hides the element completely, removing it from the layout.

3fill in blank

hard

Fix the error in the code to make the container a flex container.

CSS

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

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

Aflex

Binline

Cgrid

Dblock

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'block' which does not enable flexbox.

Using 'inline' which is not a flex container.

The flex value makes the container a flex container, enabling flexbox layout properties like justify-content.

4fill in blank

hard

Fill both blanks to create a grid container with two columns.

CSS

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

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

Agrid

Bflex

C2

D3

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'flex' instead of 'grid' for display.

Setting the number of columns to 3 instead of 2.

Setting display to grid creates a grid container. Using repeat(2, 1fr) creates two equal columns.

5fill in blank

hard

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

CSS

.centered-flex {
  display: [1];
  justify-content: [2];
  align-items: [3];
}

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

Ablock

Bcenter

Cflex

Dflex-start

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'block' instead of 'flex' for display.

Using 'flex-start' instead of 'center' for alignment.

Setting display to flex creates a flex container. Using justify-content: center and align-items: center centers items horizontally and vertically.