CSS justify-self Property - Playground Example

« Back to CSS justify-self Property

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.grid-container {
    display: grid;
    grid: auto / repeat(5, 1fr); 
    grid-gap: 10px; 
    height: 100px; 
    background: rgb(0,150,208);
    justify-items: center;
    text-align: center;
}
.grid-container div {
    border: 1px solid;
    background: rgb(241,101,41);
} 
.grid-container div:nth-of-type(1) { 
    justify-self: auto;
} 
.grid-container div:nth-of-type(2) {
    justify-self: stretch;
} 
.grid-container div:nth-of-type(3) { 
    justify-self: start;
} 
.grid-container div:nth-of-type(4) { 
    justify-self: end; 
} 
.grid-container div:nth-of-type(5) { 
    justify-self: baseline;
} 
</style>
</head>
<body>
<div class="grid-container">
   <div>auto (inherits center)</div>
   <div>stretch</div>
   <div>start</div>
   <div>end</div>
   <div>baseline</div>
</div>
</body>
</html>

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