place-items

The place-items property in CSS is shorthand for the align-items and justify-items properties, combining them into a single declaration.

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

[ normal | stretch | <baseline-position> | <self-position> ] [ normal | stretch | <baseline-position> | <self-position> ]?>

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 which is currently in working status at the time of this writing. This is the initial definition of the property, meaning it is very much a work in progress.

As such, browser support is extremely sparse and limited to Chrome 59+ and Firefox 45.

Related Properties

References

This comment thread is closed. If you have important information to share, please contact us.
icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag