How to use align-items in grid in css

CssHow-ToBeginner · 4 min read

How to Use align-items in CSS Grid for Vertical Alignment

In CSS Grid, use the align-items property on the grid container to control the vertical alignment of all grid items within their grid areas. Values like start, center, end, and stretch adjust how items align vertically inside each grid cell.

📐

Syntax

The align-items property is used on a grid container to set the vertical alignment of all its grid items within their grid areas.

start: Align items to the top of their grid area.
center: Align items vertically centered.
end: Align items to the bottom of their grid area.
stretch: Stretch items to fill the entire height of their grid area (default).

css

.grid-container {
  display: grid;
  align-items: center; /* vertical alignment of grid items */
}

💻

Example

This example shows a grid container with three items. The align-items: center; centers the items vertically inside each grid cell.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Align-items in CSS Grid Example</title>
<style>
  .grid-container {
    display: grid;
    grid-template-columns: 150px 150px 150px;
    grid-template-rows: 100px 100px;
    gap: 10px;
    align-items: center; /* vertical alignment */
    border: 2px solid #333;
  }
  .grid-item {
    background-color: #4CAF50;
    color: white;
    font-weight: bold;
    padding: 10px;
    border-radius: 5px;
    height: 50px; /* smaller than grid row height to show alignment */
  }
</style>
</head>
<body>
  <div class="grid-container">
    <div class="grid-item">Item 1</div>
    <div class="grid-item">Item 2</div>
    <div class="grid-item">Item 3</div>
    <div class="grid-item">Item 4</div>
    <div class="grid-item">Item 5</div>
    <div class="grid-item">Item 6</div>
  </div>
</body>
</html>

Output

A grid with two rows and three columns. Each green box is vertically centered inside its taller grid cell, leaving equal space above and below the box.

⚠️

Common Pitfalls

One common mistake is expecting align-items to affect horizontal alignment; it only controls vertical alignment. For horizontal alignment, use justify-items.

Another pitfall is forgetting that align-items affects all grid items. To align a single item differently, use align-self on that item.

css

/* Wrong: Trying to center horizontally with align-items */
.grid-container {
  display: grid;
  align-items: center; /* This does NOT center horizontally */
  justify-items: center; /* Correct for horizontal centering */
}

/* Correct: Align one item differently */
.grid-item.special {
  align-self: end; /* Overrides container's align-items for this item */
}

📊

Quick Reference

Value	Effect on Grid Items
start	Align items to the top of their grid area
center	Align items vertically centered in their grid area
end	Align items to the bottom of their grid area
stretch	Stretch items to fill the full height of their grid area (default)

✅

Key Takeaways

Use align-items on the grid container to control vertical alignment of all grid items.

Common values are start, center, end, and stretch.

align-items affects vertical alignment only; use justify-items for horizontal alignment.

To align a single grid item differently, use align-self on that item.

Grid items stretch by default vertically unless you change align-items.