How to use justify-self in grid in css

CssHow-ToBeginner · 3 min read

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

Use the justify-self property on a grid item to control its horizontal alignment inside its grid cell. Values like start, end, center, and stretch adjust the item's position from left to right within the cell.

📐

Syntax

The justify-self property sets the horizontal alignment of a grid item inside its grid cell. It accepts these main values:

start: aligns the item to the left edge of the cell.
end: aligns the item to the right edge of the cell.
center: centers the item horizontally in the cell.
stretch: stretches the item to fill the entire width of the cell (default).

css

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

💻

Example

This example shows a grid container with three items. Each item uses justify-self to align differently inside its cell.

css

html, body {
  height: 100%;
  margin: 0;
  font-family: Arial, sans-serif;
}
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 150px);
  gap: 10px;
  padding: 20px;
  background-color: #f0f0f0;
}
.grid-item {
  background-color: #4a90e2;
  color: white;
  padding: 20px;
  font-size: 1.2rem;
  border-radius: 6px;
}
.item-start {
  justify-self: start;
}
.item-center {
  justify-self: center;
}
.item-end {
  justify-self: end;
}

Output

<div style="display:grid;grid-template-columns:repeat(3,150px);gap:10px;padding:20px;background:#f0f0f0;"> <div style="background:#4a90e2;color:#fff;padding:20px;font-size:1.2rem;border-radius:6px;justify-self:start;">Start</div> <div style="background:#4a90e2;color:#fff;padding:20px;font-size:1.2rem;border-radius:6px;justify-self:center;">Center</div> <div style="background:#4a90e2;color:#fff;padding:20px;font-size:1.2rem;border-radius:6px;justify-self:end;">End</div> </div>

⚠️

Common Pitfalls

One common mistake is trying to use justify-self on a container instead of a grid item. It only works on direct children inside a grid container. Also, if the grid item’s width is 100% or set to stretch, justify-self may seem to have no effect because the item fills the entire cell width.

Remember, justify-self controls horizontal alignment inside the cell, so if the item is already stretched, alignment changes won’t be visible.

css

/* Wrong: applying justify-self on container */
.grid-container {
  display: grid;
  justify-self: center; /* No effect here */
}

/* Right: apply justify-self on grid items */
.grid-item {
  justify-self: center;
}

📊

Quick Reference

Value	Description
start	Aligns item to the left edge of its grid cell
end	Aligns item to the right edge of its grid cell
center	Centers item horizontally in its grid cell
stretch	Stretches item to fill the full width of its grid cell (default)

✅

Key Takeaways

Use justify-self on grid items to control their horizontal alignment inside grid cells.

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

justify-self has no effect on grid containers or non-grid children.

If the item is stretched to full width, justify-self alignment changes may not be visible.

Combine justify-self with align-self to control both horizontal and vertical alignment.