Grid gap in CSS - Mini Project: Build & Apply

Create a Responsive Grid with Gaps Using CSS Grid

📖 Scenario: You are designing a photo gallery webpage. You want to arrange photos in a neat grid with space between each photo so they don't touch each other.

🎯 Goal: Build a simple grid layout using CSS Grid that shows 6 photos arranged in 3 columns and 2 rows with a gap of 1.5rem between each photo.

📋 What You'll Learn

Use a container with CSS Grid display

Set the grid to have exactly 3 columns

Add a gap of 1.5rem between grid items

Include 6 grid items inside the container

Use semantic HTML and accessible attributes

💡 Why This Matters

🌍 Real World

Grid layouts with gaps are common in photo galleries, product listings, and dashboards to keep content organized and visually pleasing.

💼 Career

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

1

Create the HTML structure with a grid container and 6 items

Write HTML code to create a <section> with class gallery. Inside it, add exactly 6 <div> elements each with class photo. Do not add any CSS yet.

CSS

Need a hint?

Use a <section> with class gallery and inside it add 6 <div> elements with class photo.

2

Add CSS to make the container a grid with 3 columns

Write CSS to select the class .gallery and set display: grid; and grid-template-columns: repeat(3, 1fr); to create 3 equal columns.

CSS

  Photo 1
  Photo 2
  Photo 3
  Photo 4
  Photo 5
  Photo 6



.gallery {
  /* Make this a grid container with 3 columns */
}

Need a hint?

Use display: grid; and grid-template-columns: repeat(3, 1fr); inside the .gallery CSS rule.

3

Add a gap of 1.5rem between grid items

Add a CSS property gap: 1.5rem; inside the .gallery CSS rule to create space between the grid items.

CSS

  Photo 1
  Photo 2
  Photo 3
  Photo 4
  Photo 5
  Photo 6



.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* Add gap of 1.5rem here */
}

Need a hint?

Use the gap property with value 1.5rem inside the .gallery CSS rule.

4

Style the photos with background color and padding

Add CSS for the class .photo to give each photo a light gray background color #ddd, padding of 1rem, and center the text with text-align: center;.

CSS

  Photo 1
  Photo 2
  Photo 3
  Photo 4
  Photo 5
  Photo 6



.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.photo {
  /* Add background color, padding, and center text here */
}

Need a hint?

Use background-color: #ddd;, padding: 1rem;, and text-align: center; inside the .photo CSS rule.