Grid item placement in CSS - Mini Project: Build & Apply

Grid Item Placement with CSS Grid

📖 Scenario: You are creating a simple webpage layout using CSS Grid. You want to place items in specific grid cells to organize the content clearly.

🎯 Goal: Build a CSS Grid container with 3 columns and 2 rows. Place three grid items so that:The first item is in the first column and first row.The second item spans the second and third columns in the first row.The third item is in the second row and second column.

📋 What You'll Learn

Create a grid container with 3 columns and 2 rows using CSS Grid.

Place the first grid item in column 1, row 1.

Make the second grid item span columns 2 and 3 in row 1.

Place the third grid item in column 2, row 2.

Use semantic HTML and CSS only.

💡 Why This Matters

🌍 Real World

CSS Grid is widely used to create clean, organized layouts on websites and web apps. Knowing how to place items precisely helps build professional and user-friendly interfaces.

💼 Career

Front-end developers and web designers use CSS Grid daily to build responsive and accessible web pages. Mastering grid item placement is a key skill for these roles.

1

Create the HTML structure with three grid items

Write HTML code to create a <div> with class grid-container and inside it add three <div> elements with classes item1, item2, and item3. Each item should contain text: "Item 1", "Item 2", and "Item 3" respectively.

CSS

Hint

Use a container div with class grid-container. Inside it, add three divs with classes item1, item2, and item3. Put the text "Item 1", "Item 2", and "Item 3" inside each respectively.

2

Set up the grid container with 3 columns and 2 rows

In CSS, create a rule for .grid-container that sets display to grid, defines grid-template-columns as three equal columns using 1fr, and grid-template-rows as two equal rows using 100px height each.

CSS

  Item 1
  Item 2
  Item 3



.grid-container {
  /* Set display to grid and define 3 columns and 2 rows */
}

Hint

Use display: grid; on .grid-container. Then set grid-template-columns to 1fr 1fr 1fr for three equal columns. Set grid-template-rows to 100px 100px for two rows of 100 pixels height.

3

Place the first and second items in the grid

Add CSS rules for .item1 and .item2. Place .item1 in column 1, row 1 using grid-column and grid-row. Place .item2 to span columns 2 and 3 in row 1 using grid-column with a span and grid-row.

CSS

  Item 1
  Item 2
  Item 3



.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px 100px;
  gap: 10px;
}
.item1 {
  /* Place item1 in column 1, row 1 */
}
.item2 {
  /* Place item2 spanning columns 2 to 3 in row 1 */
}

Hint

Use grid-column: 1; and grid-row: 1; for .item1. For .item2, use grid-column: 2 / span 2; to cover columns 2 and 3, and grid-row: 1;.

4

Place the third item in the grid and finalize styles

Add a CSS rule for .item3 to place it in column 2, row 2 using grid-column and grid-row. Add background colors and center the text inside all items using display: flex, align-items: center, and justify-content: center.

CSS

  Item 1
  Item 2
  Item 3



.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px 100px;
  gap: 10px;
}
.item1 {
  grid-column: 1;
  grid-row: 1;
  background-color: #a2d2ff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.item2 {
  grid-column: 2 / span 2;
  grid-row: 1;
  background-color: #ffafcc;
  display: flex;
  align-items: center;
  justify-content: center;
}
.item3 {
  /* Place item3 in column 2, row 2 and center text */
}

Hint

Use grid-column: 2; and grid-row: 2; for .item3. Add display: flex;, align-items: center;, and justify-content: center; to center the text inside the item.

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