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

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

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

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 */

Hint

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

Practice

1. What CSS property do you use to make an element a grid container?

easy

A. grid-template-columns: auto;

B. display: flex;

C. position: grid;

D. display: grid;

Solution

1. Step 1: Understand grid container basics

   To create a grid layout, the container must have display: grid; set.

2. Step 2: Check other options

   display: flex; creates a flexbox, not grid. position: grid; is invalid. grid-template-columns defines columns but does not make container a grid.

3. Final Answer:

   display: grid; -> Option D

4. Quick Check:

   Grid container = display: grid; [OK]

Hint: Grid container always needs display: grid; [OK]

Common Mistakes:

• Using display: flex; instead of grid
• Trying to use position: grid;
• Setting grid-template-columns without display: grid;

2. Which of the following is the correct syntax to create a grid with 3 equal columns?

easy

A. grid-template-columns: 1fr 1fr 1fr;

B. grid-template-columns: 3px;

C. grid-columns: repeat(3, 1fr);

D. grid-template-rows: 1fr 1fr 1fr;

Solution

1. Step 1: Understand grid-template-columns syntax

   The property grid-template-columns defines columns. Using 1fr 1fr 1fr creates 3 equal columns.

2. Step 2: Check other options

   3px is a fixed small width, not equal columns. grid-columns is invalid property. grid-template-rows sets rows, not columns.

3. Final Answer:

   grid-template-columns: 1fr 1fr 1fr; -> Option A

4. Quick Check:

   Equal columns = grid-template-columns: 1fr 1fr 1fr; [OK]

Hint: Use grid-template-columns with 1fr units for equal columns [OK]

Common Mistakes:

• Using grid-columns instead of grid-template-columns
• Confusing rows and columns properties
• Using fixed px values for equal flexible columns

3. Given this CSS:

 .container {
  display: grid;
  grid-template-columns: 100px 200px;
  grid-template-rows: 50px 50px;
}

How many grid cells are created inside .container?

medium

A. 4

B. 2

C. 6

D. 8

Solution

1. Step 1: Calculate columns and rows

   There are 2 columns (100px and 200px) and 2 rows (50px and 50px).

2. Step 2: Multiply columns by rows

   Total grid cells = 2 columns x 2 rows = 4 cells.

3. Final Answer:

   4 -> Option A

4. Quick Check:

   2 columns x 2 rows = 4 cells [OK]

Hint: Multiply number of columns by rows for total grid cells [OK]

Common Mistakes:

• Adding columns and rows instead of multiplying
• Counting only columns or only rows
• Confusing grid cells with grid lines

4. What is wrong with this CSS if the goal is to create a grid container with 3 equal columns?

 .grid {
  display: grid;
  grid-template-columns: repeat(3);
}

medium

A. display: grid; is missing

B. Missing unit for repeat count

C. repeat() requires two arguments: count and size

D. grid-template-columns cannot use repeat()

Solution

1. Step 1: Check repeat() syntax

   The repeat() function needs two arguments: number of times and size, e.g. repeat(3, 1fr).

2. Step 2: Identify the error

   Here, only repeat(3) is given, missing the size argument, so it's invalid.

3. Final Answer:

   repeat() requires two arguments: count and size -> Option C

4. Quick Check:

   repeat() needs count and size [OK]

Hint: repeat() always needs count and size, like repeat(3, 1fr) [OK]

Common Mistakes:

• Using repeat() with only one argument
• Forgetting to specify display: grid;
• Thinking repeat() is invalid in grid-template-columns

5. You want a grid container that has 2 columns: the first column is 150px wide, and the second column fills the remaining space. Which CSS is correct?

hard

A. display: grid; grid-template-columns: 150px auto;

B. display: grid; grid-template-columns: 150px 1fr;

C. display: grid; grid-template-columns: auto 150px;

D. display: grid; grid-template-columns: 1fr 150px;

Solution

1. Step 1: Understand fixed and flexible columns

   150px is fixed width. To fill remaining space, use 1fr which means flexible fraction.

2. Step 2: Check options

   display: grid; grid-template-columns: 150px auto; uses auto which sizes based on content, not remaining space. Options B and D put 150px in wrong column order.

3. Final Answer:

   display: grid; grid-template-columns: 150px 1fr; -> Option B

4. Quick Check:

   Fixed + flexible = 150px 1fr [OK]

Hint: Use 1fr for flexible space after fixed width [OK]

Common Mistakes:

• Using auto instead of 1fr for flexible space
• Swapping column order
• Not setting display: grid;