Item alignment

Properties to align an individual item inside its own cell.

justify-self: aligns an item horizontally in its cell.
align-self: aligns an item vertically in its cell.
place-self: shorthand to combine justify-self and align-self.
Possible values:
stretch: The item stretches to fill the whole cell along that axis (default).
start: Aligns to the start of the axis (left in horizontal, top in vertical).
center: Centers along the axis.
end: Aligns to the end of the axis (right in horizontal, bottom in vertical).

Example

In this dynamic example, we can see the different alignments of an item within its own cell using justify-self and align-self.

Select justify-self:

stretchstartcenterend

Select align-self:

stretchstartcenterend

ResultLiveContainer width100%

html

<div class="container">
  <div class="child">1</div>
  <div class="child item">2</div>
  <div class="child">3</div>
</div>

<div class="container">
  <div class="child">1</div>
  <div class="child item">2</div>
  <div class="child">3</div>
</div>

css

.container {
  border: 1px solid #2b7de0;
  display: grid;
  gap: 1rem;
  grid-template-columns: auto auto auto;
  grid-template-rows: 6rem;
  height: 6rem;
  padding: 0.5rem;
}

.item {
  align-self: stretch;
  background: #d9d2f5;
  justify-self: stretch;
}

.child {
  padding: 1rem;
}

.container {
  border: 1px solid #2b7de0;
  display: grid;
  gap: 1rem;
  grid-template-columns: auto auto auto;
  grid-template-rows: 6rem;
  height: 6rem;
  padding: 0.5rem;
}

.item {
  align-self: stretch;
  background: #d9d2f5;
  justify-self: stretch;
}

.child {
  padding: 1rem;
}

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