Grid item placement in CSS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ selector

intermediate

Which CSS rule places the grid item in the second column and third row?

Given a grid container, which CSS property and value correctly place a grid item in the second column and third row?

CSS

/* Assume the grid container has 4 columns and 4 rows */
.grid-item {
  /* Your code here */
}

A grid-column-start: 2; grid-row-start: 3;

B grid-column: 2; grid-row: 3;

C grid-column: 3 / 4; grid-row: 2 / 3;

D grid-column-start: 3; grid-row-start: 2;

💡 Hint

Use the properties that specify the start line for column and row.

The grid-column-start and grid-row-start properties specify the starting grid lines for the item placement. Setting grid-column-start: 2 and grid-row-start: 3 places the item at the second column and third row.

Option A uses shorthand but only with single values, which is valid but less explicit. Option A is more precise and correct for this placement.

Options C and D specify wrong lines, so the item would be placed elsewhere.

❓ layout

intermediate

What is the visual result of this grid item placement?

Consider a 3x3 grid container. The CSS below is applied to a grid item. What will you see in the browser?

CSS

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 100px);
  gap: 10px;
}
.grid-item {
  grid-column: 2 / 4;
  grid-row: 1 / 3;
  background-color: lightblue;
}

A A light blue box spanning only column 2 and row 1.

B A light blue box spanning columns 1 and 2 and rows 2 and 3.

C A light blue box spanning columns 2 and 3 and rows 1 and 2.

D A light blue box spanning all three columns and rows.

💡 Hint

Look at the grid-column and grid-row values as start/end lines.

The grid-column: 2 / 4 means the item starts at column line 2 and ends before column line 4, so it covers columns 2 and 3.

The grid-row: 1 / 3 means it covers rows 1 and 2.

So the item is a box spanning columns 2 and 3 horizontally and rows 1 and 2 vertically, with a light blue background.

🧠 Conceptual

advanced

What error occurs if you set grid-column: 5 / 7 on a 4-column grid?

If a grid container has 4 columns, what happens when a grid item has grid-column: 5 / 7;?

CSS

.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.grid-item {
  grid-column: 5 / 7;
}

A The item will not be displayed because the column lines 5 and 7 do not exist.

B The item will span from the 5th to the 7th column lines, creating extra columns automatically.

C The browser will ignore the invalid lines and place the item in the first column.

D The item will span from column 5 to 7, but only columns 5 and 6 will be visible.

💡 Hint

CSS Grid will create implicit grid tracks if the specified lines are outside the explicit grid.

If a grid item references grid lines beyond the explicit grid defined by grid-template-columns, the browser automatically creates implicit grid tracks to place the item.

For a 4-column grid (grid lines 1 through 5), grid-column: 5 / 7; starts at existing line 5 and extends to line 7, creating two implicit columns.

Option B is incorrect because line 5 exists and implicit tracks are created for line 7.

Options C and D do not reflect browser behavior.

❓ accessibility

advanced

How to ensure keyboard users can navigate grid items placed with CSS grid?

When using CSS grid to place items visually, what should you do to keep keyboard navigation logical and accessible?

A Arrange the HTML source order to match the visual grid order or use ARIA roles to define reading order.

B Use tabindex="0" on all grid items and rely on visual order only.

C Use CSS to reorder items visually and ignore source order since keyboard users don't rely on it.

D Disable keyboard navigation on grid items to avoid confusion.

💡 Hint

Keyboard navigation follows the HTML source order, not visual placement.

Keyboard users navigate content in the order it appears in the HTML source.

If CSS grid changes visual order, the source order should still match the logical reading order.

Using ARIA roles or properties can help define reading order if source order cannot be changed.

Options A, B, and C harm accessibility by confusing keyboard users or disabling navigation.

📝 Syntax

expert

What is the output of this CSS grid shorthand placement?

Given the CSS below, what is the final grid area occupied by the item?

CSS

.grid-item {
  grid-area: 2 / 3 / 4 / 5;
}

A The CSS is invalid and will cause a syntax error.

B The item starts at column line 2, row line 3, ends at column line 4, row line 5, spanning 2 columns and 2 rows.

C The item occupies the named grid area '2 / 3 / 4 / 5' as a string.

D The item starts at row line 2, column line 3, ends at row line 4, column line 5, spanning 2 rows and 2 columns.

💡 Hint

Remember the order of values in grid-area shorthand: row-start / column-start / row-end / column-end.

The grid-area shorthand uses the order: row-start / column-start / row-end / column-end.

So 2 / 3 / 4 / 5 means the item starts at row line 2 and column line 3, and ends before row line 4 and column line 5.

This covers 2 rows (lines 2 to 4) and 2 columns (lines 3 to 5).

Option D reverses row and column order, which is incorrect.

Option D treats it as a named area string, which is invalid syntax here.

Option D is wrong because the syntax is valid.

Practice

1. What does the CSS property grid-column: 2 / 4; do in a grid container?

easy

A. It places the grid item starting at column line 2 and ending before column line 4.

B. It places the grid item in columns 2 and 4 only, skipping column 3.

C. It spans the grid item across 4 columns starting from column 2.

D. It places the grid item only in column 2.

Solution

1. Step 1: Understand grid-column syntax

   The syntax grid-column: start / end; means the item starts at the start line and ends before the end line.

2. Step 2: Apply to given values

   Here, start is 2 and end is 4, so the item covers columns 2 and 3 (lines 2 to 4).

3. Final Answer:

   It places the grid item starting at column line 2 and ending before column line 4. -> Option A

4. Quick Check:

   grid-column: 2 / 4 means columns 2 to 3 [OK]

Hint: Remember: start line to end line excludes the end line itself [OK]

Common Mistakes:

• Thinking it includes the end line column
• Confusing span count with line numbers
• Assuming it skips columns between start and end

2. Which of the following is the correct syntax to make a grid item span 3 rows starting from row line 1?

easy

A. grid-row: 1 / span 3;

B. grid-row: span 3 / 1;

C. grid-row: 3 / 1;

D. grid-row: 1 - 3;

Solution

1. Step 1: Recall grid-row span syntax

   The correct syntax to span rows is grid-row: start / span number;.

2. Step 2: Match with options

   grid-row: 1 / span 3; uses 1 / span 3, meaning start at line 1 and span 3 rows down.

3. Final Answer:

   grid-row: 1 / span 3; -> Option A

4. Quick Check:

   Start line then span count is correct [OK]

Hint: Use 'start / span count' to span grid lines correctly [OK]

Common Mistakes:

• Reversing start and span values
• Using dash instead of slash
• Placing span before start line

3. Given the CSS below, where will the grid item appear?

grid-template-columns: repeat(4, 1fr);
grid-template-rows: 100px 100px;
.item {
  grid-column: 3 / 5;
  grid-row: 1 / 2;
}

medium

A. The item spans columns 1 to 3 on the first row.

B. The item spans columns 3 and 4 on the second row.

C. The item spans columns 3 and 4 on the first row.

D. The item spans columns 2 to 4 on the first row.

Solution

1. Step 1: Analyze grid-column placement

   The item starts at column line 3 and ends before line 5, so it covers columns 3 and 4.

2. Step 2: Analyze grid-row placement

   The item starts at row line 1 and ends before line 2, so it is on the first row only.

3. Final Answer:

   The item spans columns 3 and 4 on the first row. -> Option C

4. Quick Check:

   grid-column: 3 / 5 and grid-row: 1 / 2 means columns 3-4, row 1 [OK]

Hint: Start line to end line covers all lines in between [OK]

Common Mistakes:

• Confusing row numbers with column numbers
• Assuming end line is included
• Mixing up first and second row

4. Identify the error in this CSS for placing a grid item:

.box {
  grid-column: span 2 / 4;
  grid-row: 1 / span 3;
}

medium

A. There is no error; the code is correct.

B. grid-row cannot use span with a start line.

C. grid-column must use only numbers, not span.

D. The order of values in grid-column is incorrect; span should come second.

Solution

1. Step 1: Check grid-column syntax

   The correct syntax is start / end or start / span count. Here, span 2 / 4 is reversed; span should be second.

2. Step 2: Check grid-row syntax

   grid-row: 1 / span 3; is correct syntax to start at line 1 and span 3 rows.

3. Final Answer:

   The order of values in grid-column is incorrect; span should come second. -> Option D

4. Quick Check:

   Span always follows start line [OK]

Hint: Start line first, then span count in grid placement [OK]

Common Mistakes:

• Placing span before start line
• Mixing up grid-column and grid-row syntax
• Assuming span can be first value

5. You want a grid item to start at column 2 and span 3 columns, but your grid has only 4 columns total. Which CSS is correct and will not cause layout issues?

hard

A. grid-column: 2 / 6;

B. grid-column: 2 / span 3;

C. grid-column: 2 / 4;

D. grid-column: span 3 / 2;

Solution

1. Step 1: Understand grid size and placement

   The grid has 4 columns, so column lines go from 1 to 5 (one more than columns).

2. Step 2: Check each option

   • A: grid-column: 2 / 6; tries to end at line 6, outside explicit grid (may create implicit tracks).
   • B: grid-column: 2 / 4; ends at line 4, spans columns 2-3 only (2 columns).
   • C: grid-column: 2 / span 3; starts at line 2, spans 3 columns to line 5, fits perfectly.
   • D: grid-column: span 3 / 2; has incorrect syntax (span cannot precede start).

3. Final Answer:

   grid-column: 2 / span 3; -> Option B

4. Quick Check:

   Start line then span within grid limits [OK]

Hint: Use 'start / span count' to stay inside grid boundaries [OK]

Common Mistakes:

• Using end line beyond grid size
• Reversing span and start line
• Assuming grid lines equal columns