HTML & CSS - Mastery / CSS Grid System

Aligning Individual Items

📌 What’s the Purpose?

While justify-items and align-items affect all grid items, sometimes you want to override alignment for just one item. That's where these come in:

Property

Axis

What it does

justify-self

Horizontal

Aligns a single item within its cell

align-self

Vertical

Aligns a single item within its cell

place-self

Both

Shorthand for align-self + justify-self

✅ justify-self

  • Aligns a grid item horizontally (inline axis).

  • Affects how the content inside the cell aligns left to right.

🔹 Values:

  • start → Align to the left of the cell.

  • end → Align to the right of the cell.

  • center → Center horizontally.

  • stretch (default) → Fills the entire width of the cell.

🔹 Example:

.item1 {
  justify-self: end;
}

Full Code

✅ align-self

  • Aligns a grid item vertically (block axis)

  • Affects how the content inside the cell aligns top to bottom.

🔹 Values:

  • start → Align to the top of the cell.

  • end → Align to the bottom of the cell.

  • center → Center vertically.

  • stretch (default) → Fills the entire height of the cell.

🔹 Example:

.item2 {
  align-self: center;
}

Full Code

✅ place-self

  • A shorthand for setting both align-self and justify-self.

  • Syntax: place-self: <align-self> <justify-self>;

🔹 Example:

.item3 {
  place-self: center start; 
  /* align-self: center; justify-self: start; */
}

If you provide only one value:

place-self: center;
/* This sets both align-self and justify-self to center */

Full Code