CSS Grid Align
In this page:
justify-items: Horizontal Item Alignment
justify-items controls how every item aligns horizontally inside its own cell -- start, end, center, or the default stretch, which makes the item fill the full cell width unless it has an explicit width set.
Example: justify-items: Horizontal Item Alignment
<style>
.container {
display: grid;
grid-template-columns: 1fr 1fr;
justify-items: center;
background: #eee;
padding: 10px;
}
.container div {
background: steelblue;
color: white;
padding: 8px 16px;
}
</style>
<div class="container">
<div>Centered</div>
<div style="background: seagreen;">Centered</div>
</div>align-items: Vertical Item Alignment
align-items is the vertical counterpart to justify-items, controlling how items sit inside their cell top-to-bottom, again defaulting to stretch so items fill the cell height.
Example: align-items: Vertical Item Alignment
<style>
.container {
display: grid;
grid-template-columns: 1fr 1fr;
height: 150px;
align-items: center;
background: #eee;
}
.container div {
background: steelblue;
color: white;
padding: 8px;
}
</style>
<div class="container">
<div>Centered vertically</div>
<div style="background: seagreen;">Centered vertically</div>
</div>justify-content: Horizontal Grid Alignment
When the total track width is smaller than the container, justify-content controls where the whole block of tracks sits horizontally within the container -- start, end, center, space-between, space-around, space-evenly.
Example: justify-content: Horizontal Grid Alignment
<style>
.container {
display: grid;
grid-template-columns: 100px 100px;
width: 400px;
justify-content: center;
background: #eee;
border: 2px dashed #999;
gap: 4px;
}
.container div {
background: steelblue;
color: white;
padding: 8px;
text-align: center;
}
</style>
<div class="container">
<div>Track</div>
<div style="background: seagreen;">Track</div>
</div>align-content: Vertical Grid Alignment
align-content is the vertical counterpart to justify-content, positioning the whole block of row tracks within the container when total row height is less than the container height.
Example: align-content: Vertical Grid Alignment
<style>
.container {
display: grid;
grid-template-rows: 50px 50px;
height: 300px;
align-content: space-between;
background: #eee;
}
.container div {
background: steelblue;
color: white;
padding: 8px;
}
</style>
<div class="container">
<div>Row</div>
<div style="background: seagreen;">Row</div>
</div>place-items and place-content Shorthands
place-items combines align-items and justify-items into one declaration (align value first), and place-content does the same for align-content/justify-content -- useful shortcuts once you understand the four longhand properties individually.
Example: place-items and place-content Shorthands
<style>
.container {
display: grid;
grid-template-columns: 1fr 1fr;
height: 150px;
place-items: center start;
background: #eee;
}
.container div {
background: steelblue;
color: white;
padding: 8px;
}
</style>
<div class="container">
<div>place-items: align value first, justify value second</div>
</div>Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: