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

Browser Support

Desktop

X	79	59	45	46	11

Tablets / Mobile

59	59	45	43	11	7.0

Last updated by CSSPortal on: 6th November 2019

Share this Page

If you have enjoyed using CSSPortal, please consider sharing this page with other users, just click on your preferred social media link or copy the webpage from the link below.

URL

Menu