CSS justify-self property example at PNLdev

Run
<!DOCTYPE html>
<html>
<head>
<style> 
#container {
    width: 100%;
    aspect-ratio: 2/1;
    border: 5px solid green;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}
#container > div {
    border: 5px solid yellow;
}
.blue {
    background-color: blue;
    width: 50%;
    justify-self: right;
}
.red {
background-color: red;
width: 60%;
}
.green {
background-color: green;
width: 60%;
}
</style>
</head>
<body>
    <h1>justify-self property example</h1>
    <p>By default, all items are placed in the container on the left, except for the item that uses the justify-self right property.</p>
    <div id="container">
    <div class="red">RED</div>
    <div class="blue">BLUE<br>justify-self: right</div>  
    <div class="green">GREEN</div>
    <div class="red">RED</div>
    <div class="green">GREEN</div>
    <div class="red">RED</div>
    <div class="green">GREEN</div>
    <div class="red">RED</div>
    <div class="green">GREEN</div>
    </div>
</body>
</html>