Grid item placement in CSS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to place the grid item in the first column.

CSS

.item {
  grid-column: [1];
}

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

A2

Bauto

Cspan 2

D1

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'auto' places the item automatically, not specifically in the first column.

Using 'span 2' makes the item span two columns, not place it in the first.

The grid-column property with value 1 places the item in the first column.

2fill in blank

medium

Complete the code to make the grid item span across two columns.

CSS

.item {
  grid-column: [1];
}

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

Aspan 2

B1 / 3

C2 / 4

Dauto

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'auto' does not span columns.

Using '1 / 3' works but is more specific than needed here.

The value span 2 tells the grid item to cover two columns starting from its current position.

3fill in blank

hard

Fix the error in the code to correctly place the grid item starting at column 2 and ending at column 4.

CSS

.item {
  grid-column: [1];
}

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

Aauto

B2 / 4

C4 / 2

Dspan 2

Attempts:

3 left

💡 Hint

Common Mistakes

Reversing the start and end lines causes the item not to display correctly.

Using 'auto' does not specify exact placement.

The correct syntax is start / end, so 2 / 4 places the item from column 2 to 4.

4fill in blank

hard

Fill both blanks to place the grid item starting at row 1 and spanning 3 rows.

CSS

.item {
  grid-row-start: [1];
  grid-row-end: [2];
}

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

A1

Bspan 3

C4

D3

Attempts:

3 left

💡 Hint

Common Mistakes

Using a fixed end line number instead of 'span' may not work if the grid changes.

Swapping start and end values causes incorrect placement.

Start at row 1 and span 3 rows using span 3 for the end.

5fill in blank

hard

Fill all three blanks to create a grid area named 'header' that starts at row 1, column 1, and spans 2 rows and 3 columns.

CSS

.item {
  grid-area: [1] / [2] / [3] / 4;
}

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

A1

Cspan 2

Dspan 3

Attempts:

3 left

💡 Hint

Common Mistakes

Confusing row and column order in the shorthand.

Not using 'span' for multiple rows or columns.

The grid-area shorthand uses row-start / column-start / row-end / column-end. Here, start at row 1, column 1, span 2 rows, and end at column 4 (which is 1 + 3 columns).