Run ❯
×
Change Orientation
Change Theme, Dark/Light
<!DOCTYPE html> <html> <head> <style> #container { width: 50%; aspect-ratio: 2/1; border: 1px solid black; display: grid; grid-template-columns: 1fr 1fr; direction: rtl; } #container > div { border: 1px solid black; } .blue { background-color: lightblue; width: 50%; justify-self: end; } .red { background-color: coral; width: 40%; } .green { background-color: lightgreen; width: 60%; } </style> </head> <body> <h2>justify-self with direction: rtl</h2> <p>Grid items are aligned at the start of the grid container in the inline direction. Inline direction is changed with direction property value 'rtl', so now the end of the contianer in the inline direction is on the left side of the contianer instead of on the right of it.</p> <div id="container"> <div class="red">RED</div> <div class="blue">BLUE</div> <div class="green">GREEN</div> <div class="red">RED</div> </div> </body> </html>