CSS place-self 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!

☕ Buy a Coffee

Description

The place-self property aligns the grid layout element inside the cell along the column axis and along the row axis of the grid-container. It is a shorthand property for align-self and justify-self properties. The place-self property overrides the alignment value of the specific element specified for the grid container with the align-items, justify-items property, or the universal place-items property. Currently, if the element is not a layout grid element (not located inside the parent element, which is a block element or a lower-case grid container), then the place-self property will not have any effect on such an element.

Initial value: See individual properties
Applies to: Block-level boxes, absolutely-positioned boxes, and grid items
Inherited: No
Computed value: See individual properties
Animatable: Yes
JavaScript syntax: object.style.placeSelf

Interactive Demo

place-self: stretch center;

place-self: center start;

place-self: start end;

place-self: end center;

One

Two

Three

Syntax

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

Values

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

Example

HTML

<div class="grid-container">

   <div>stretch</div>

   <div>start</div>

   <div>end</div>

   <div>baseline</div>

</div>

<div class="grid-container2">

   <div>stretch center</div>

   <div>end center</div>

   <div>end start</div>

   <div>start end</div>

</div>

CSS

.grid-container,
.grid-container2 {
    display: grid; 
    grid: auto / repeat(4, 1fr); 
    grid-gap: 10px; 
    height: 100px;
    background: rgb(0,150,208); 
    text-align: center; 
}
.grid-container div,
.grid-container2 div {
    border: 1px solid; 
    background: rgb(241,101,41);
} 
.grid-container div:nth-of-type(1) {
    place-self: stretch; 
} 
.grid-container div:nth-of-type(2) {
    place-self: start;
} 
.grid-container div:nth-of-type(3) { 
    place-self: end; 
} 
.grid-container div:nth-of-type(4) {
   place-self: baseline;
}
.grid-container2 div:nth-of-type(1) { 
    place-self: stretch center; 
} 
.grid-container2 div:nth-of-type(2) {
    place-self: end stretch;
} 
.grid-container2 div:nth-of-type(3) { 
    place-self: end start;
} 
.grid-container2 div:nth-of-type(4) {
    place-self: start end; 
}

Result

Editor