CSS Grid Align

These four properties all live on the grid container and control how the whole grid -- or the items inside their cells -- sit relative to extra space, not how the tracks themselves are sized.

In this page:

justify-items: Horizontal Item Alignment
align-items: Vertical Item Alignment
justify-content: Horizontal Grid Alignment
align-content: Vertical Grid Alignment
place-items and place-content Shorthands

Syntax

css

selector {
  justify-content: start | center | end | space-between;
  align-content: start | center | end | space-between;
}

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.

Note:

Accepted values:
justify-items: normal | stretch | start | end | center | self-start | self-end | baseline
align-items: normal | stretch | start | end | center | self-start | self-end | baseline
place-items — shorthand for align-items then justify-items
justify-content: start | end | center | stretch | space-between | space-around | space-evenly
align-content — the same values, on the block axis
inherit | initial | unset | revert — CSS-wide keywords accepted by every property

Example: justify-items: Horizontal Item Alignment

css

<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.

Note:

Accepted values:
stretch — fills the cell (what the default normal does in grid)
start | end | center — positions items vertically in their cell
baseline — aligns baselines
self-start | self-end — logical alignment
normal — default
inherit | initial | unset | revert — CSS-wide keywords accepted by every property

Example: align-items: Vertical Item Alignment

css

<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.

Note:

Accepted values:
start | end | center — packs the grid horizontally
stretch — expands auto tracks
space-between | space-around | space-evenly — distributes tracks
normal — default, behaves like stretch in grid
note: needs free space in the container
inherit | initial | unset | revert — CSS-wide keywords accepted by every property

Example: justify-content: Horizontal Grid Alignment

css

<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.

Note:

Accepted values:
start | end | center — packs the grid vertically
stretch — expands auto tracks
space-between | space-around | space-evenly — distributes tracks
normal — default, behaves like stretch in grid
note: needs free space in the container's height
inherit | initial | unset | revert — CSS-wide keywords accepted by every property

Example: align-content: Vertical Grid Alignment

css

<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.

Note:

Accepted values:
place-items: <align> <justify> — shorthand for align-items and justify-items
place-items: center — center both
place-content: <align> <justify> — shorthand for align-content and justify-content
place-content: center — center the whole grid
inherit | initial | unset | revert — CSS-wide keywords accepted by every property

Example: place-items and place-content Shorthands

css

<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>

Live Example

Chapter Quiz — Complete all 10 topics to unlock

0/10 topics done

Complete these topics first:

← Previous Lesson CSS Grid Gaps Next Lesson → CSS Grid Items

CSS Grid Align

justify-items: Horizontal Item Alignment

align-items: Vertical Item Alignment

justify-content: Horizontal Grid Alignment

align-content: Vertical Grid Alignment

place-items and place-content Shorthands

Chapter Quiz — Complete all 10 topics to unlock

Login to run this code