Container alignment

Properties that control how items are aligned inside each grid cell.

justify-items: aligns items horizontally within each cell.
align-items: aligns items vertically within each cell.
place-items: shorthand to combine justify-items and align-items.
Possible values:
stretch: Stretches the item to fill the entire cell (default).
start: Aligns to the start of the cell (left for horizontal, top for vertical).
center: Centers the item within the cell.
end: Aligns to the end of the cell (right for horizontal, bottom for vertical).

Example

In this dynamic example, we can see the different alignments of cells using justify-items and align-items.

Select justify-items:

stretchstartcenterend

Select align-items:

stretchstartcenterend

ResultLiveContainer width100%

html

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

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

css

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

.child-big {
  padding: 2rem;
}

.child {
  padding: 1rem;
}

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

.child-big {
  padding: 2rem;
}

.child {
  padding: 1rem;
}

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