CSS: CSS Grid Items
Last updated: 2026-10-13
Grid item properties let you precisely control how individual children are placed within a grid container.
1. Grid Item Properties
(1) Quick Reference
| Property | Values | Purpose |
|---|---|---|
grid-column |
1 / 3, span 2 |
Column placement |
grid-row |
1 / 3, span 2 |
Row placement |
grid-area |
header, 1 / 2 / 3 / 4 |
Named area or line placement |
justify-self |
start, end, center, stretch |
Horizontal alignment within cell |
align-self |
start, end, center, stretch |
Vertical alignment within cell |
place-self |
center, start end |
Shorthand for justify + align |
2. grid-column and grid-row
Control where items start and end on the grid:
▶ Example
▶ Try it Yourself(1) Full-Width Item
Use grid-column: 1 / -1 to span all columns:
▶ Example
▶ Try it Yourself3. justify-self / align-self
Control alignment within individual cells:
▶ Example
▶ Try it Yourself4. Grid Overlap
Grid items can overlap — later items appear on top:
▶ Example
▶ Try it Yourself❓ FAQ
Q What does grid-column: 1 / -1 mean?
A Means "from grid line 1 to the last grid line (-1 is the last line number)" — spanning the full row. Perfect for full-width headers or dividers without needing to know total column count.
Q Can Grid items overlap?
A Yes. Grid allows items to occupy the same grid area — later items cover earlier ones. Use this for overlay effects like text on images. Control stacking with z-index.
Q How to use the span keyword?
A
grid-column: span 2 means "span 2 columns" — more intuitive than writing grid line numbers. No need to know which line to start from; the browser calculates automatically. Especially useful in responsive scenarios where you don't know exact column counts.📖 Summary
- Grid item placement is very flexible — precisely specify start/end grid lines, or use
spankeyword for multi-row/column spanning - Within cells,
justify-items/align-itemscontrol overall alignment,justify-self/align-selfcontrol individual elements - If line numbers are hard to remember, try
grid-template-areasfor named regions — more intuitive
📝 Exercises
- Create a 4×4 grid, place an item spanning 2 columns and 2 rows starting from column 2, row 2.
- Use
grid-template-areasfor a complete page layout: header (spanning 2 columns), sidebar, content area, footer (spanning 2 columns). - Center all items horizontally and vertically in a grid container (using
place-items: center). - Make the third grid item align to the bottom-right corner of its cell (using
justify-selfandalign-self).
