CSS place-items Property

Description

The place-items property aligns all elements of the grid layout along the column axis and the row axis of the grid container (this is a shorthand property for align-items properties and justify-items ).

Initial value: See individual properties
Applies to: All elements
Inherited: No
Media: Visual
Computed value: See individual properties
Animatable: Yes
CSS Version: CSS3
JavaScript syntax: object.style.placeItems

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