What is a place-items

The CSS place-items shorthand property allows you to align items along both the block and inline directions at once.

Are you working with Grid in CSS and confused about the content to place center? Let's understand how can we do this using align-items and with justify-items.

Example

<div class="box-1">
  <div>place-items</div>
</div>

.box-1 {
  display: grid;
  justify-items: center;
  align-items: center;
  border: 1px solid red;
  width: 200px;
  height: 200px;
}

Let's first understand what these two CSS properties does.

align-items

Aligns content along the vertical (column) axis.

justify-items

Aligns along the horizontal (row) axis.

Do you find it difficult to remember the align-items justify-items. Here, We have another great CSS property called place-items.

The place-items property in CSS is shorthand for the align-items and justify-items properties, combining them into a single declaration. A common usage is doing horizontal and vertical centering with Grid

Let's rewrite the above example using the single property place-items.

<div class="box-1">
  <div>place-items</div>
</div>


.box-1 {
  display: grid;
  place-items:center;
  border: 1px solid red;
  width: 200px;
  height: 200px;
}

No need to remember align-items justify-items. The place-items property accepts dual values, the first for align-items and the second for justify-items.

Another example

if you are working with justify items and align-items to place the item at the start like this:-

.box-1 {
   display:grid;
   justify-items:start;
   align-items:start.
}

This is equivalent to:

.box-1 {
  display:grid;
  place-items:start;
}

If only one value is provided, then it sets both properties.

What makes this property interesting is that it behaves differently based on the context it is used. For example, some values only apply to Flexbox and will not work in a Grid setting. Additionally, some values apply to the align-items property where others apply to the justify-items side.

Browser Support

• Edge 79+ (post-Chromium)
• Firefox 45+
• Chrome 59+
• Safari 11+

References

CSS Box Alignment Model Level 3

The official specification where the place-items property is initially defined.

Mozilla Developer Network

The Mozilla team’s documentation.

Box Alignment Cheat Sheet

Rachel Andrew’s outline is a super helpful resource for grasping alignment terms and their definitions.

Thank You.