CSS place-items Property

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

place-items: center stretch;

place-items: center start;

place-items: start end;

place-items: end center;

One

Two

Three

Syntax

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

Values

<align-items>See align-items CSS property for values.
<justify-items>See justify-items CSS property for values.

Example

HTML

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

CSS

#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; 
}

Result

Editor