place-items

Avatar of Geoff Graham
Geoff Graham on (Updated on )

📣 Freelancers, Developers, and Part-Time Agency Owners: Kickstart Your Own Digital Agency with UACADEMY Launch by UGURUS 📣

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.

ValueTypeDescription
autoContextualThe 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.
normalContextualTakes 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
stretchDistributionExpands the element to both edges of the container vertically for align-items and horizontally for justify-items.
startPositionalAll elements are aligned against each other on the starting (left) edge of the container
endPositionalAll elements are aligned against each other on the ending (right) edge of the container
centerPositionalItems are aligned next to each other toward the center of the container
leftPositionalItems 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.
rightPositionalItems 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-startPositionalA flexbox-only value (that falls back to start) where items are packed toward the starting edge of the container.
flex-endPositionalA flexbox-only value (that falls back to end) where items are packed toward the ending edge of the container.
self-startSelf-PositionalAllows 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-endSelf-PositionalAllows 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
BaselineAligns 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