Bird
Raised Fist0
CSSmarkup~5 mins

Grid container in CSS

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
Introduction

A grid container helps you arrange items neatly in rows and columns, like a table but more flexible.

When you want to create a photo gallery with rows and columns.
When you need a layout with header, sidebar, main content, and footer.
When you want to align items evenly in both directions.
When you want to build a responsive design that changes layout on different screen sizes.
Syntax
CSS
selector {
  display: grid;
  grid-template-columns: value;
  grid-template-rows: value;
  gap: value;
}

display: grid; turns an element into a grid container.

You define columns and rows with grid-template-columns and grid-template-rows.

Examples
This creates 3 columns each 100 pixels wide.
CSS
.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
}
This creates 3 columns where the middle column is twice as wide as the others.
CSS
.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}
This creates 4 equal columns with 10 pixels gap between items.
CSS
.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
Sample Program

This example creates a grid container with three columns. The middle column is twice as wide as the others. Each item is styled with a blue background and white text. The grid has gaps between items and padding around the container.

CSS
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Grid Container Example</title>
  <style>
    .grid-container {
      display: grid;
      grid-template-columns: 1fr 2fr 1fr;
      gap: 1rem;
      padding: 1rem;
      background-color: #f0f0f0;
    }
    .grid-item {
      background-color: #4a90e2;
      color: white;
      padding: 1rem;
      text-align: center;
      border-radius: 0.5rem;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <main>
    <section class="grid-container" aria-label="Example grid container">
      <div class="grid-item">Item 1</div>
      <div class="grid-item">Item 2</div>
      <div class="grid-item">Item 3</div>
    </section>
  </main>
</body>
</html>
OutputSuccess
Important Notes

Use gap to add space between grid items easily.

Grid containers automatically place items in rows and columns based on your settings.

Try resizing the browser to see how grid adapts if you use flexible units like fr.

Summary

A grid container uses display: grid; to arrange items in rows and columns.

You control the layout with grid-template-columns and grid-template-rows.

Grid makes it easy to build neat, flexible, and responsive layouts.

Practice

(1/5)
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;