CSS place-self Property

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
Media: Visual
Computed value: See individual properties
Animatable: Yes
CSS Version: CSS3
JavaScript syntax: object.style.placeSelf

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