CSS Grid container

Defines an element as a grid container and establishes a new grid formatting context for its direct children.

Part of: HTML and CSS Journey — Module 54

Understanding CSS Grid container in HTML & CSS

What it does: Combining repeat with the fr unit allocates equivalent sizing blocks efficiently. grid-template-rows measures explicit layout sizes vertically for stacking row bands. display: grid is the standard value that makes an element a block-level grid layout container. Track listings are space-separated lists in CSS Grid, like 1fr 200px 1fr. The gap property replaces older grid-gap properties and styles uniform layout gutters. The fr unit calculates layout fraction distributions dynamically across track spaces. repeat(3, 1fr) simplifies your markup by generating three identical track values automatically. display: grid establishes a structured multi-dimensional coordinate space for nested nodes.

Common mistakes: The selector is missing a class dot prefix or tag definition. To target a class named grid-container, use .grid-container. The value true-grid is invalid. To activate the layout context, use display: grid.

Class: _____________________ · Name: _____________________ · Date: _________

Free printable worksheet with full answer key — or add this module to a class and your students practise it interactively.

🖨 Print worksheet + answer key Add CSS Grid container to a class →

This module's key terms are also in a printable crossword (Modules 53–63) and word search (Modules 43–63).

Take this worksheet further — free with Cloodit

Each concept is reinforced from every angle — learned, then applied, then tested.

Learning

Duo

Which declaration initializes a block-level grid container?

display: grid;display: grid-container;

Matches

.container { grid-template-columns: 1fr, 1fr; }

↓

Using commas instead of spaces to separate distinct track sizing elements.

Applying

Meanings

Term

display: grid

Meaning

Defines an element as a grid container and establishes a new grid formatting context for its direct children.

Practice

.grid-container {

Testing

Gaps

: grid;

Check Answer

Spots

1grid-container {

2 display: grid;

Cloodit turns curriculum-aligned coding content into journeys students work through one biome at a time.

Students earn collectable badges

Over 100 of them, across seven natural biomes.

Study Buddy

Students build a real study resource

Turns their work into revision material ready for Flash Cards and Exam study.

Diamond Dash — one of Cloodit's live, competitive Sprint games

Students lock in with Sprints

Live, competitive practice for the start of the lesson or a teacher-led lesson finisher.

A Cloodit certificate of achievement, ready to personalise and print

Custom printable certificates

Honour your top performers, or encourage a student who's trying hard — ready to print in seconds.

Add to class →

Quick Questions

1. Which declaration initializes a block-level grid container?

A. display: grid-container;

B. display: grid; ✓

display: grid is the standard value that makes an element a block-level grid layout container.

2. How should you separate multiple column sizes in grid-template-columns?

A. With spaces ✓

B. With commas

Track listings are space-separated lists in CSS Grid, like 1fr 200px 1fr.

3. Which property acts as a modern shorthand to set spacing between both rows and columns?

A. grid-spacing

B. gap ✓

The gap property replaces older grid-gap properties and styles uniform layout gutters.

4. What unit represents an automatic fractional share of available space inside a grid container?

A. fr ✓

B. gr

The fr unit calculates layout fraction distributions dynamically across track spaces.

5. Is it valid to mix fixed units like pixels with relative units like fr inside track layouts?

A. Yes ✓

B. No

Grid accommodates mixed units gracefully, allowing rules like grid-template-columns: 200px 1fr.

Match the Pairs

.container { display: grid; } → Turns an element into a block-level grid container interface.

.container { gap: 20px; } → Sets a uniform 20-pixel spacing channel between rows and columns.

Creates three parallel vertical columns of equal width distributions. → .container { grid-template-columns: repeat(3, 1fr); }

Establishes a horizontal structural framework with two rows. → .container { grid-template-rows: 100px auto; }

.container { grid-template-columns: 1fr, 1fr; } → Using commas instead of spaces to separate distinct track sizing elements.

.container { display: box-grid; } → Using box-grid instead of the valid standard grid keyword value.

Key Term

display: grid

Defines an element as a grid container and establishes a new grid formatting context for its direct children.

Fill in the Blanks

1. .wrapper { display: grid; }

Hint: Type the property name used to turn an element into a grid container

2. .container { display: grid; grid-template-columns: 200px 1fr; }

Hint: Type the property used to define the tracks of your grid columns

3. .board { display: grid; grid-template-rows: 100px auto; }

Hint: Type the property used to establish horizontal track rows

4. .gallery { display: grid; gap: 15px; }

Hint: Type the shorthand property that defines space between grid cells

5. .layout { display: grid; grid-template-columns: repeat(3, 1fr); }

Hint: Type the fractional unit keyword to make columns take equal shares

Spot the Error

Question 1

A grid-container {

B display: grid;

C gap: 10px;

D }

Line A — The selector is missing a class dot prefix or tag definition. To target a class named grid-container, use .grid-container.

Question 2

A .main-grid {

B display: true-grid;

C gap: 20px;

D }

Line B — The value true-grid is invalid. To activate the layout context, use display: grid.

Question 3

A .container {

B display: grid;

C grid-template-columns: 100px, 1fr, 100px;

D }

Line C — Grid track definitions should be separated by standard spaces, not commas.

Question 4

A .dashboard {

B display: grid;

C grid-template-columns: 1fr 1fr;

D grid-rows-template: repeat(2, 1fr);

E }

Line D — The property name is grid-template-rows, not grid-rows-template.

Question 5

A .menu {

B display: grid;

C grid-template-columns: 200px 1fr;

D row-space: 15px;

E }

Line D — There is no row-space property. Use row-gap or the gap shorthand to separate rows.

Student with a class code? Join your class →