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

Example

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

Browser Support

Desktop
Explorer Edge Chrome Firefox Opera Safari
XX594546X
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
59594543X7.0