How to Use grid-row-align and grid-column-align in CSS Grid

CSS Grid is a powerful layout system that gives developers precise control over element positioning in two dimensions: rows and columns. While working with grid layouts, many developers search for properties like grid-row-align or grid-column-align. But do these properties actually exist? And if not, what are the correct ways to align items within grid rows and columns?

In this blog post, we’ll clear the confusion and show you the correct CSS properties to use for aligning grid items along rows (vertically) and along columns (horizontally).

❓ Does grid-row-align or grid-column-align Exist?

No — there are no official CSS properties named grid-row-align or grid-column-align.
These are commonly misunderstood terms. Instead, you should use:

• align-items / align-self → for vertical alignment (row axis)
• justify-items / justify-self → for horizontal alignment (column axis)

Let’s break them down.

✅ Vertical Alignment in Grid (Row Axis)

Use: align-items (for all grid items)

.grid-container {
  display: grid;
  align-items: center; /* top | center | bottom | stretch */
}

Use: align-self (for individual grid item)

.grid-item {
  align-self: end;
}

📌 align-items aligns all grid items along the row axis (vertically),
while align-self overrides it per item.

✅ Horizontal Alignment in Grid (Column Axis)

Use: justify-items (for all grid items)

.grid-container {
  display: grid;
  justify-items: start; /* start | center | end | stretch */
}

Use: justify-self (for individual grid item)

.grid-item {
  justify-self: center;
}

📌 justify-items controls alignment along the column axis (horizontally),
while justify-self customizes this on a per-item basis.

🧪 Complete Example

<div class="grid-container">
  <div class="grid-item">A</div>
  <div class="grid-item">B</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: 100px 100px;
  grid-template-rows: 100px 100px;
  align-items: center;       /* Vertical alignment */
  justify-items: center;     /* Horizontal alignment */
  height: 300px;
}

.grid-item {
  background: #23ebff;
  padding: 10px;
}

In this layout:

• Both items will be centered inside their respective grid cells
• You can customize alignment by applying align-self or justify-self on each .grid-item

🧠 Tip: Think in Terms of Axes

📝 Conclusion

While grid-row-align and grid-column-align are not valid CSS properties, the intent behind them is real: controlling how items are aligned within grid cells. Use the correct alignment properties—align-items, align-self, justify-items, and justify-self—to gain full control over positioning in your CSS Grid layouts.

🔑 Quick Cheatsheet