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

Need a 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 */
}

Need a 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 */
}

Need a 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 */
}

Need a 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.