HTML & CSS - Mastery / CSS Grid System

Aligning Grid Items

🔄 Axis Refresher

  • Inline Axis (Horizontal) → Affected by justify-*

  • Block Axis (Vertical) → Affected by align-*

🧍 Aligning Individual Items

Property

Axis

Description

justify-items

Horizontal

Aligns grid items inside their cells

align-items

Vertical

Aligns grid items inside their cells

place-items

Both

Shorthand for align-items + justify-items

✅ justify-items

  • Aligns items horizontally inside each grid cell (row axis).

    ❗️It aligns items inside the grid cells not grid cells

  • Works on the inline direction.

📌 Values:

Value

Description

start

Align to the left of the cell

end

Align to the right of the cell

center

Center horizontally in the cell

stretch (default)

Fills the cell width

🧪 Example:

.grid {
  justify-items: center;
}

Full Code

✅ align-items

  • Aligns items vertically inside each grid cell (column axis).

  • Works on the block direction.

📌 Values:

Value

Description

start

Align to the top of the cell

end

Align to the bottom of the cell

center

Center vertically in the cell

stretch (default)

Fills the cell height

🧪 Example:

.grid {
  align-items: start;
}

Full Code

✅ place-items

  • Shorthand for both align-items and justify-items.

  • Syntax: place-items: align justify;

🧪 Examples:

.grid {
  place-items: center;         
  /* align-items: center; justify-items: center */
}

.grid {
  place-items: start end;      
  /* align-items: start; justify-items: end; */
}

Full Code

📝 Summary Table

Property

Aligns Along

Controls Position Of

Example Value

justify-items

Horizontal

Inside grid cell

center

align-items

Vertical

Inside grid cell

start

place-items

Both

Inside grid cell

center end