CSS Grid Items
Grid item properties let you precisely control how individual children are placed within a grid container.
Grid Item Properties
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 |
grid-column and grid-row
Control where items start and end on the grid:
Example
HTML
<style>
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(3, 100px);
gap: 10px;
background: #f5f5f5;
padding: 10px;
}
.item {
background: #3498db;
color: white;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
}
.span-2-col { grid-column: span 2; }
.span-2-row { grid-row: span 2; }
</style>
<div class="grid">
<div class="item">1</div>
<div class="item span-2-col">Spans 2 columns</div>
<div class="item">3</div>
<div class="item span-2-row">Spans 2 rows</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
</div>
Full-Width Item
Use grid-column: 1 / -1 to span all columns:
Example
HTML
<style>
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
background: #f5f5f5;
padding: 10px;
}
.header {
grid-column: 1 / -1; /* Spans all columns */
background: #2c3e50;
color: white;
padding: 15px;
text-align: center;
}
.item {
background: #3498db;
color: white;
padding: 20px;
text-align: center;
border-radius: 4px;
}
</style>
<div class="grid">
<div class="header">Header (full width)</div>
<div class="item">Column 1</div>
<div class="item">Column 2</div>
<div class="item">Column 3</div>
</div>
justify-self / align-self
Control alignment within individual cells:
Example
HTML
<style>
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
background: #f5f5f5;
padding: 10px;
height: 200px;
}
.item {
background: #e74c3c;
color: white;
padding: 10px;
border-radius: 4px;
}
.start { justify-self: start; align-self: start; }
.center { justify-self: center; align-self: center; }
.end { justify-self: end; align-self: end; }
</style>
<div class="grid">
<div class="item start">Start</div>
<div class="item center">Center</div>
<div class="item end">End</div>
</div>
Grid Overlap
Grid items can overlap — later items appear on top:
Example
HTML
<style>
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
background: #f5f5f5;
padding: 10px;
}
.item1 {
grid-column: 1 / 3;
grid-row: 1 / 3;
background: rgba(231, 76, 60, 0.7);
color: white;
padding: 20px;
z-index: 1;
}
.item2 {
grid-column: 2 / 4;
grid-row: 2 / 4;
background: rgba(52, 152, 219, 0.7);
color: white;
padding: 20px;
}
</style>
<div class="grid">
<div class="item1">Item 1 (behind)</div>
<div class="item2">Item 2 (on top)</div>
</div>
❓ 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).