CSS Grid Container

The Grid intro turned parents into lattices. This lesson stays on the container: define tracks, set gap, align items inside cells, and pack the grid when free space remains. Item spanning and named areas wait for Grid Items and Grid Areas.

A grid container toolkit

📊 Grid container at a glance

Property	Everyday job
`grid-template-columns`	Defines column track sizes
`grid-template-rows`	Defines row track sizes
`gap`	Gutters between tracks
`justify-items` / `align-items`	Aligns each item inside its cell (inline / block axis)
`justify-content` / `align-content`	Positions the whole grid when it is smaller than the container
`grid-auto-flow`	Controls auto-placement packing order (row or column)

Draw the tracks first. Then decide how cells align their contents, and only then how leftover space around the whole grid should behave.

Template tracks — columns and rows

grid-template-columns and grid-template-rows sketch the lattice. Mix fr, lengths, and repeat() for everyday boards.

Columns and rows together

css

.board {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto 1fr auto;
min-height: 16rem;
}

gap — keep gutters honest

gap (or row-gap / column-gap) spaces tracks without margin hacks on every child.

Gap on the container

css

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

justify-items and align-items — inside the cell

These align each item inside its cell. justify-items works on the inline axis; align-items on the block axis. Do not confuse them with content packing.

Center items in cells

css

.board {
display: grid;
grid-template-columns: repeat(2, 8rem);
justify-items: center;
align-items: center;
gap: 0.75rem;
}

justify-content and align-content — pack the grid

When the grid tracks are smaller than the container, content properties slide or space the whole grid. Useful for icon boards that should not stretch forever.

Pack the grid in free space

css

.board {
display: grid;
grid-template-columns: repeat(3, 6rem);
justify-content: space-between;
align-content: start;
gap: 0.5rem;
min-height: 12rem;
}

A calm grid container habit

Template columns and rows first, then gap, then item alignment inside cells, then content packing if free space remains. Peek at grid-auto-flow when auto-placement order matters. Leave spanning, line numbers, and named areas for the next Grid lessons.

Named container shell

css

.shell {
display: grid;
grid-template-columns: 2fr 1fr;
grid-template-rows: auto 1fr;
gap: 1.25rem;
justify-items: stretch;
align-items: stretch;
}

Try it yourself

Build a board with three 1fr columns and auto 1fr auto rows.
Add gap: 1rem.
Center cell contents with justify-items and align-items.
Pack a small fixed-track board with justify-content: space-between.
Note one property you will save for Grid Items or Grid Areas.

Common mistakes

Mixing justify-items (inside cells) with justify-content (whole grid)
Putting item span or area names on the container too early
Defining only columns and wondering why row heights feel random
Bringing Flex grow habits onto the grid container
Treating this lesson as the full Areas module

Summary

Grid container props define tracks, gutters, and alignment
grid-template-columns / rows sketch the lattice
justify-items / align-items align content inside cells
justify-content / align-content pack the grid in free space
Item span and named areas come in later Grid lessons

🧠 Test Your Knowledge

Ready to Start

Test Your Knowledge

Challenge yourself with this interactive quiz and see how well you understand the topic

❓

Questions

🎯

70%

To Pass

♾️

∞

Time

🔄

∞

Attempts

📝 Instructions

Read each question carefully
Select the best answer for each question
You can retake the quiz as many times as you want
Your progress will be shown at the top

Language