How to use place-items in grid in css

CssHow-ToBeginner · 3 min read

How to Use place-items in CSS Grid for Easy Alignment

Use the place-items property in CSS Grid to align grid items both horizontally and vertically in one line. It is a shorthand for align-items and justify-items, accepting values like center, start, or end.

📐

Syntax

The place-items property sets the alignment of grid items along both the block (vertical) and inline (horizontal) axes. It is a shorthand for align-items and justify-items.

place-items: <align-items> <justify-items>;
If only one value is given, it applies to both axes.
Common values: start, end, center, stretch.

css

place-items: <align-items> <justify-items>;

/* Examples */
place-items: center center;
place-items: start end;
place-items: stretch;

💻

Example

This example shows a grid container with four items. Using place-items: center; centers all items horizontally and vertically inside their grid cells.

css

html, body {
  height: 100%;
  margin: 0;
  font-family: Arial, sans-serif;
}
.container {
  display: grid;
  grid-template-columns: repeat(2, 150px);
  grid-template-rows: repeat(2, 150px);
  gap: 10px;
  place-items: center;
  height: 100vh;
  background-color: #f0f0f0;
}
.item {
  background-color: #4a90e2;
  color: white;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  border-radius: 8px;
}

Output

⚠️

Common Pitfalls

One common mistake is using place-items on containers that are not grid or flex containers; it only works with CSS Grid and Flexbox.

Another is misunderstanding that place-items affects the alignment inside each grid cell, not the grid container itself.

Also, forgetting that place-items is shorthand: if you provide only one value, it applies to both axes, which might not be what you want.

css

/* Wrong: Using place-items on a block container */
.container {
  place-items: center;
}

/* Right: Using place-items on a grid container */
.container {
  display: grid;
  place-items: center;
}

📊

Quick Reference

place-items: shorthand for align-items (vertical) and justify-items (horizontal).
Values: start, end, center, stretch.
Use on grid or flex containers only.
One value applies to both axes; two values set vertical and horizontal separately.

✅

Key Takeaways

Use place-items to align grid items horizontally and vertically in one step.

place-items is shorthand for align-items and justify-items.

It only works on grid or flex containers, not on regular block elements.

Providing one value applies it to both axes; two values set vertical and horizontal alignment separately.

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