CSS place-items Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

Description

The place-items CSS property is a shorthand property that allows you to align both the items along the block (column) axis and inline (row) axis within a grid or flex container. It combines the align-items property, which controls vertical alignment, and the justify-items property, which controls horizontal alignment, into a single declaration. This property simplifies the alignment of all items within a container, making it easier to achieve consistent and aesthetically pleasing layouts in web design. Individual properties are: align-items properties and justify-items.

Initial value
See individual properties
Applies to
All elements
Inherited
No
Computed value
See individual properties
Animatable
Yes
JavaScript syntax
object.style.placeItems

Interactive Demo

One
Two
Three

Syntax

place-items: <align-items> <justify-items>?

Values

Example

<body> 
place-items:
<select id="alignItemsControl">
<option value="stretch">stretch</option>
<option value="start">start</option>
<option value="end">end</option>
<option value="center">center</option>
<option value="baseline">baseline</option>
</select>
<select id="justifyItemsControl">
<option value="stretch">stretch</option>
<option value="start">start</option>
<option value="end">end</option>
<option value="center">center</option>
<option value="baseline">baseline</option>
</select>
<div id="grid-container"><div>A</div><div>B</div><div>C</div><div>D</div><div>E</div><div>F</div><div>G</div><div>H</div></div>
<script>
const container = document.getElementById("grid-container");
alignItemsControl = document.getElementById("alignItemsControl");
justifyItemsControl = document.getElementById("justifyItemsControl");
updateAlignment = function() {
container.style.placeItems = alignItemsControl.value + " " + justifyItemsControl.value;
}
alignItemsControl.addEventListener("change", updateAlignment);
justifyItemsControl.addEventListener("change", updateAlignment);
</script>
</body>
#grid-container {
    display: grid; 
    grid: auto / repeat(4, 40px);
    height: 120px; 
    background: rgb(0,150,208); 
    margin-top: 15px; 
    text-align: center; 
}
div > div {
    background: rgb(241,101,41); 
    border: 1px solid; 
} 

Browser Support

The following table will show you the current browser support for the CSS place-items property.

Desktop
Edge Chrome Firefox Opera Safari
7959454611
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
59454311759

Last updated by CSSPortal on: 3rd January 2024