Grid container in CSS - Mini Project: Build & Apply

Create a Simple Grid Container

📖 Scenario: You are building a photo gallery webpage. You want to arrange photos in a neat grid so they look organized and easy to browse.

🎯 Goal: Create a grid container that arranges child items in three equal columns with some space between them.

📋 What You'll Learn

Use CSS Grid to create the layout

Set the container to have exactly three columns of equal width

Add a gap of 1rem between grid items

Use semantic HTML with a <section> as the grid container

Ensure the grid container is responsive and uses modern CSS properties

💡 Why This Matters

🌍 Real World

Grid containers are used in web design to create clean, organized layouts for galleries, product listings, dashboards, and more.

💼 Career

Understanding CSS Grid is essential for front-end developers to build responsive and modern web layouts efficiently.

1

Create the HTML structure

Create a <section> element with the class gallery. Inside it, add exactly three <div> elements with the classes photo1, photo2, and photo3 respectively.

CSS

Need a hint?

Use semantic <section> for the container and add three child <div> elements with the exact class names.

2

Set the container to use CSS Grid

In your CSS, select the .gallery class and set its display property to grid.

CSS

  
  
  


.gallery {
  /* Set display to grid here */
}

Need a hint?

Use display: grid; to turn the container into a grid layout.

3

Define three equal columns and add gap

Add to the .gallery CSS rule: set grid-template-columns to create three equal columns using 1fr units, and set gap to 1rem.

CSS

  
  
  


.gallery {
  display: grid;
  /* Add grid-template-columns and gap here */
}

Need a hint?

Use grid-template-columns: 1fr 1fr 1fr; for three equal columns and gap: 1rem; for spacing.

4

Add basic styling to photos for visibility

Add CSS rules for .photo1, .photo2, and .photo3 to give each a background color and a fixed height of 8rem so they are visible on the page.

CSS

  
  
  


.gallery {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
}

/* Add background colors and height to photo classes here */

Need a hint?

Give each photo a distinct background color and set height: 8rem; so they show as colored blocks.