Grid template areas in CSS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a grid container with three columns.

CSS

display: grid;
grid-template-columns: [1];

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

A1fr 1fr 1fr

Brepeat(2, 1fr)

C100px 100px

Dauto auto

Attempts:

3 left

💡 Hint

Common Mistakes

Using only two columns instead of three.

Using fixed pixel sizes instead of flexible fractions.

The grid-template-columns property defines the number and size of columns. Using 1fr 1fr 1fr creates three equal columns.

2fill in blank

medium

Complete the code to define grid template areas with a header and main content side by side.

CSS

grid-template-areas: "header [1]";

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

Asidebar

Bheader

Cfooter

Dmain

Attempts:

3 left

💡 Hint

Common Mistakes

Repeating the same area name twice.

Using an area name not defined in the grid.

The grid-template-areas property names areas in the grid. To place header and main side by side, use "header main".

3fill in blank

hard

Fix the error in the grid-template-areas definition to create a header spanning two columns.

CSS

grid-template-areas:
  "header header"
  "[1] content";

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

Amain

Bfooter

Csidebar

Dheader

Attempts:

3 left

💡 Hint

Common Mistakes

Repeating 'header' in the second row.

Using an undefined area name.

The second row should have two different areas. Using sidebar and content is correct. header repeated again would cause an error.

4fill in blank

hard

Fill both blanks to create a grid with header spanning all columns and footer below spanning all columns.

CSS

grid-template-areas:
  "[1] [1] [1]"
  "main main sidebar"
  "[2] [2] [2]";

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

Aheader

Bcontent

Cfooter

Dsidebar

Attempts:

3 left

💡 Hint

Common Mistakes

Using different area names in the same row.

Not repeating the area name three times to span all columns.

The header and footer should each span all three columns, so their names repeat three times in their rows.

5fill in blank

hard

Fill all three blanks to create a grid with a header spanning two columns, a sidebar on the left, and content on the right.

CSS

grid-template-areas:
  "[1] [1] [2]"
  "[3] [3] [2]";

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

Aheader

Bsidebar

Ccontent

Dfooter

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up sidebar and content positions.

Not repeating area names correctly to span columns.

The header spans the first two columns in the first row. The sidebar spans the first two columns in the second row. The content is in the third column for both rows.