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:

.center-inside-of-me {
  display: grid;
  place-items: center;
}

These properties have gained use with the introduction of Flexbox and Grid layouts, but are also applied to:

• Block-level boxes
• Absolutely-positioned boxes
• Static-position of absolutely positioned boxes
• Table cells

Syntax

The property accepts dual values, the first for align-items and the second for justify-items. As a refresher, align-items aligns content along the vertical (column) axis whereas justify-items aligns along the horizontal (row) axis.

.item {
  display: grid;
  place-items: start center;
}

This is the same as writing:

.item {
  display: grid;
  align-items: start;
  justify-items: center;
}

If only one value is provided, then it sets both properties. For example, this:

.item {
  display: grid;
  place-items: start;
}

…is the same as writing this:

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

Accepted Values

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.

Further, the values themselves can be thought of as falling into a number of types of alignment: contextual, distribution, positional (which becomes self-positional if directly applied to a child-element in the layout), and baseline.

Rachel Andrew has an excellent Box Alignment cheat sheet that helps illustrate the effect of the values.

Value	Type	Description
auto	Contextual	The value adjusts accordingly based on the context of the element. It uses the justify-items value of the element’s parent element. If not parent exists or it is applied to an element that is positioned with absolute, then the value becomes normal.
normal	Contextual	Takes the default behavior of the layout context where it is applied. • Block-level layouts: start • Absolute-positioning: start for replaced absolute elements and stretch for all others • Table layouts: Value is ignored • Flexbox layouts: Value is ignored • Grid layouts: stretch, unless an aspect ratio or intrinsic sizing is used where it behaves like start
stretch	Distribution	Expands the element to both edges of the container vertically for align-items and horizontally for justify-items.
start	Positional	All elements are aligned against each other on the starting (left) edge of the container
end	Positional	All elements are aligned against each other on the ending (right) edge of the container
center	Positional	Items are aligned next to each other toward the center of the container
left	Positional	Items are aligned next to each other toward the left side of the container. If the property is not parallel to a standard top, right, bottom, left axis, then it behaves like end.
right	Positional	Items are aligned next to each other toward the right side of the container. If the property is not parallel to a standard top, right, bottom, left axis, then it behaves like start.
flex-start	Positional	A flexbox-only value (that falls back to start) where items are packed toward the starting edge of the container.
flex-end	Positional	A flexbox-only value (that falls back to end) where items are packed toward the ending edge of the container.
self-start	Self-Positional	Allows an item in a layout to align itself on the container edge based on its own starting side. Basically overrides what the set value is on the parent.
self-end	Self-Positional	Allows an item in a layout to align itself on the container edge based on its own ending side instead of inheriting the the container’s positional value. Basically overrides what the set value is on the parent.
first baseline last baseline	Baseline	Aligns all elements within a group (i.e. cells within a row) by matching up their alignment baselines. Defaults to first if baseline is used on its own.

Browser Support

This property is included in the CSS Box Alignment Model Level 3 specification.

Browser support is pretty wide and stable:

• 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.

Related properties