🌐 What is align-items?

align-items is a CSS Grid (and Flexbox) property that controls thevertical alignment of grid items *within their grid cells*. It sets the default vertical alignment for **all items** unless overridden byalign-self on individual items.

📌 Where does align-items apply?

It applies to the **grid container**, not to grid items directly. Only works when the container has display: grid or inline-grid.

🎯 Available Values

🧪 Basic Example

.container {
  display: grid;
  grid-template-rows: repeat(3, 100px);
  align-items: center;
}

All grid items will be vertically centered inside their cells.

📐 Visual Alignment Example

🧱 Example Using All Values

.start   { align-items: start; }
.center  { align-items: center; }
.end     { align-items: end; }
.stretch { align-items: stretch; }

🧠 align-items vs align-content

📦 Override align-items Using align-self

If you want individual item-level control, use align-self.

.container {
  display: grid;
  align-items: center; /* default for all items */
}

.item1 {
  align-self: start;
}

.item2 {
  align-self: end;
}

🧩 Real-World Use Cases

📱 Responsive Behavior

align-items adapts naturally across breakpoints. For custom behavior, override it in media queries:

.container {
  align-items: stretch;
}

@media (min-width: 768px) {
  .container {
    align-items: center;
  }
}

⚠️ Common Mistakes

🔥 Summary

align-items sets the vertical alignment of all grid items inside their respective cells. By mastering this property, you gain complete control over internal item positioning — making UI grids clean, balanced, and visually polished.

Learn more atMDN Docs 📘