CSS Grid Items

Grid Container steered the parent — tracks, gap, and cell defaults. Grid items answer a different question: how does each child claim lines, span tracks, and override alignment inside its cell? Master line placement before named areas.

A grid items toolkit

📊 Grid items at a glance

Property	Everyday job
`grid-column`	Sets the item’s column start/end lines (shorthand)
`grid-row`	Sets the item’s row start/end lines (shorthand)
`span`	Stretches an item across N tracks from its start line
`justify-self`	Overrides `justify-items` for one item (inline axis)
`align-self`	Overrides `align-items` for one item (block axis)
`place-self`	Shorthand for `align-self` + `justify-self`

Grid lines are numbered from the start edge. An item that starts at line 1 and ends at line 3 covers two column tracks. Think in lines first; named areas come later.

grid-column — place on column lines

grid-column: start / end pins a child between column lines. A sidebar often sits on the first track while the main panel takes the rest.

Sidebar on column lines

css

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

.board__aside {
grid-column: 1 / 2;
}

.board__main {
grid-column: 2 / 3;
}

span — stretch across tracks

span counts tracks from the start line. A hero that should cover the full width often uses grid-column: 1 / span 3 on a three-column board.

Hero spans three columns

css

.hero {
grid-column: 1 / span 3;
}

grid-row — place on row lines

Same idea on the block axis. Pin a banner to the top band, or let a tall card occupy two row tracks with span.

Banner on row lines

css

.banner {
grid-row: 1 / 2;
}

.tall-card {
grid-row: 2 / span 2;
}

Column and row together

Combine both when one child needs a clear rectangle — for example a featured tile that spans two columns and one row.

Featured tile span

css

.feature {
grid-column: 1 / span 2;
grid-row: 1 / 2;
}

place-self — one item, different cell alignment

Override the container’s justify-items / align-items for a single child. place-self: center is a calm shorthand when both axes should match.

Place-self override

css

.board {
display: grid;
justify-items: stretch;
align-items: stretch;
gap: 0.75rem;
}

.board .badge {
place-self: center;
}

A calm grid item habit

Place with column and row lines first, use span when a child must cover multiple tracks, then refine one-off alignment with place-self. Keep DOM order sensible — avoid order tricks that scramble keyboard focus. Leave named template areas for Grid Areas.

Named item roles

css

.shell__hero {
grid-column: 1 / -1;
}

.shell__aside {
grid-column: 1 / 2;
align-self: start;
}

.shell__main {
grid-column: 2 / 3;
}

Try it yourself

Build a two-column board; place aside on grid-column: 1 / 2 and main on 2 / 3.
Add a three-column hero with grid-column: 1 / span 3.
Pin a banner with grid-row: 1 / 2.
Span a featured tile across two columns and one row.
Center one badge with place-self: center and note named areas for next.

Common mistakes

Putting span or line numbers on the container instead of an item
Forgetting lines are 1-based and counting tracks as if they were lines
Mixing item placement with justify-content packing on the parent
Jumping to named grid-template-areas before line placement is solid
Using order to reshuffle visuals and breaking tab/source order

Summary

Grid items control line placement, spanning, and per-item alignment
grid-column / grid-row pin start and end lines
span stretches across tracks from a start line
place-self (and self props) override cell alignment for one child
Named template areas come in the Grid Areas lesson next

🧠 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