How to Use align-self in CSS Grid for Item Alignment

Use the align-self property on a grid item to control its vertical alignment inside its grid area. It overrides the container's align-items setting and accepts values like start, end, center, and stretch.

Syntax

The align-self property is applied to a grid item to set its vertical alignment within the grid cell. It accepts these main values:

• start: aligns the item to the top of the cell
• end: aligns the item to the bottom of the cell
• center: centers the item vertically
• stretch: stretches the item to fill the cell vertically (default)

css

align-self: start | end | center | stretch;

Example

This example shows a grid container with three items. Each item uses align-self to align differently inside their grid cells.

css

html, body {
  height: 100%;
  margin: 0;
  font-family: Arial, sans-serif;
}
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 150px;
  gap: 10px;
  border: 2px solid #333;
  padding: 10px;
  height: 200px;
}
.item {
  background-color: #4a90e2;
  color: white;
  padding: 10px;
  border-radius: 5px;
  font-weight: bold;
}
.item1 {
  align-self: start;
}
.item2 {
  align-self: center;
}
.item3 {
  align-self: end;
}

Output

<div style="display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:150px;gap:10px;border:2px solid #333;padding:10px;height:200px;">
  <div style="background-color:#4a90e2;color:white;padding:10px;border-radius:5px;font-weight:bold;align-self:start;">Item 1 (start)</div>
  <div style="background-color:#4a90e2;color:white;padding:10px;border-radius:5px;font-weight:bold;align-self:center;">Item 2 (center)</div>
  <div style="background-color:#4a90e2;color:white;padding:10px;border-radius:5px;font-weight:bold;align-self:end;">Item 3 (end)</div>
</div>

Common Pitfalls

One common mistake is expecting align-self to work without a grid or flex container. It only works inside grid or flex layouts. Another pitfall is forgetting that align-self affects vertical alignment in grid by default, so if your grid rows are auto-sized, you might not see a difference.

Also, align-self overrides the container's align-items for that item only, so if you want consistent alignment, set align-items on the container instead.

css

/* Wrong: align-self on non-grid item has no effect */
.non-grid-item {
  align-self: end; /* No effect outside grid or flex container */
}

/* Right: align-self inside grid container works */
.grid-container {
  display: grid;
}
.grid-item {
  align-self: end;
}

Quick Reference

Use this quick guide to remember align-self values and their effects:

Value	Effect
start	Aligns item to the top of the grid cell
end	Aligns item to the bottom of the grid cell
center	Centers item vertically in the grid cell
stretch	Stretches item to fill the grid cell vertically (default)

Key Takeaways

Use align-self on grid items to control vertical alignment inside their grid cells.

align-self overrides the container's align-items setting for that specific item.

It only works inside grid or flex containers, not on regular block elements.

Common values are start, end, center, and stretch (default).

If you don't see alignment changes, check your grid row sizing and container display.