Content alignment

Properties that control how rows and columns are distributed inside the grid container.

justify-content: distributes columns horizontally inside the grid.
align-content: distributes rows vertically inside the grid.
place-content: shorthand to combine justify-content and align-content.
Possible values:
stretch: Stretches rows/columns to fill all available space (default).
start: Aligns the whole grid to the start of the axis (top or left).
center: Centers the grid along the axis.
end: Places all rows/columns at the end of the axis (bottom or right).
space-around: Distributes space leaving equal margins around each row or column group (edges have half the space of the interior).
space-between: Distributes rows/columns so the first and last are flush with the edges, and space is distributed only between them.
space-evenly: Places perfectly equal spaces between all rows/columns and also at the edges.

Example

In this dynamic example, we can see the different row and column alignments using justify-content and align-content.

ResultLiveContainer width100%

html

<div class="container">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
  <div class="child">6</div>
</div>

<div class="container">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
  <div class="child">6</div>
</div>

css

.container {
  border: 1px solid #2b7de0;
  align-content: stretch;
  display: grid;
  gap: 1rem;
  grid-template-columns: auto auto auto;
  height: 150px;
  justify-content: stretch;
  padding: 0.5rem;
}

.child {
  padding: 1rem;
}

.container {
  border: 1px solid #2b7de0;
  align-content: stretch;
  display: grid;
  gap: 1rem;
  grid-template-columns: auto auto auto;
  height: 150px;
  justify-content: stretch;
  padding: 0.5rem;
}

.child {
  padding: 1rem;
}

Edit the code or use the selectors: the result updates instantly.