place-items

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

* Some parts of this feature may have varying levels of support.

The CSSplace-itemsshorthand property aligns items along both the block and inline directions at once. It sets the values of the align-items and justify-items properties. If the second value is not set, the first value is also used for it.

Try it

place-items: center stretch; 
place-items: center start; 
place-items: start end; 
place-items: end center; 
<section class="default-example" id="default-example"> <div class="example-container"> <div class="transition-all" id="example-element"> <div>One</div> <div>Two</div> <div>Three</div> </div> </div> </section> 
#example-element { border: 1px solid #c5c5c5; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 80px; grid-gap: 10px; width: 220px; } #example-element > div { background-color: rgba(0, 0, 255, 0.2); border: 3px solid blue; }

Constituent properties

This property is a shorthand for the following CSS properties:

Syntax

css
/* Positional alignment */ place-items: center; place-items: normal start; place-items: center normal; place-items: start legacy; place-items: end normal; place-items: self-start legacy; place-items: self-end normal; place-items: flex-start legacy; place-items: flex-end normal; place-items: anchor-center; /* Baseline alignment */ place-items: baseline normal; place-items: first baseline legacy; place-items: last baseline normal; place-items: stretch legacy; /* Global values */ place-items: inherit; place-items: initial; place-items: revert; place-items: revert-layer; place-items: unset;

Values

One of the following forms:

  • A single align-items value, which is used to set alignment in both block and inline directions.
  • An align-items value, which sets alignment in the block direction, followed by a justify-items value, which sets alignment in the inline direction.

Formal definition

Initial valueas each of the properties of the shorthand:
Applies toall elements
Inheritedno
Computed valueas each of the properties of the shorthand:
Animation typediscrete

Formal syntax

place-items = 
<'align-items'><'justify-items'>?

<align-items> = 
normal|
stretch|
<baseline-position>|
[<overflow-position>?<self-position>]|
anchor-center

<justify-items> = 
normal|
stretch|
<baseline-position>|
<overflow-position>?[<self-position>|left|right]|
legacy|
legacy&&[left|right|center]|
anchor-center

<baseline-position> = 
[first|last]?&&
baseline

<overflow-position> = 
unsafe|
safe

<self-position> = 
center|
start|
end|
self-start|
self-end|
flex-start|
flex-end

Examples

Placing items in a flex container

In flexbox justify-self or justify-items do not apply, as on the main axis items are treated as a group. Therefore, the second value will be ignored.

CSS

css
#container { height: 200px; width: 240px; place-items: stretch; /* You can change this value by selecting another option in the list */ background-color: #8c8c8c; display: flex; }

Result

Placing items in a grid container

The following grid container has items which are smaller than the grid areas they are placed in, therefore place-items will move them in the block and inline dimensions.

CSS

css
#grid-container { height: 200px; width: 240px; place-items: stretch; /* You can change this value by selecting another option in the list */ background-color: #8c8c8c; display: grid; grid-template-columns: repeat(3, 1fr); } #grid-container > div { width: 50px; }

Result

Specifications

Specification
CSS Box Alignment Module Level 3
# place-items-property

Browser compatibility

See also