Run ❯
Get your
own
website
×
Change Orientation
Save Code
Change Theme, Dark/Light
Go to Spaces
<!DOCTYPE html> <html> <head> <style> #container { width: 50%; aspect-ratio: 2/1; border: 1px solid black; display: grid; grid-template-columns: 1fr 1fr; justify-items: start; direction: rtl; } #container > div { border: 1px solid black; } .blue { background-color: lightblue; width: 50%; } .red { background-color: coral; width: 40%; } .green { background-color: lightgreen; width: 60%; } </style> </head> <body> <h2>justify-items 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 start of the contianer in the inline direction is on the right side of the contianer instead of on the left 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>
