row-grid-lanes-alignment-positioned-items-001-ref.html (1302B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <style> 6 html,body { 7 color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0; 8 } 9 10 .grid { 11 position: relative; 12 display: grid; 13 grid-template-columns: 200px; 14 grid-template-rows: 100px 150px; 15 width: 200px; 16 height: 300px; 17 background: grey; 18 gap: 10px; 19 padding: 10px; 20 } 21 22 .grid > div { 23 position: absolute; 24 } 25 26 .grid > :nth-child(1) { 27 grid-row: 1/2; 28 justify-self: start; 29 background: green; 30 } 31 32 .grid > :nth-child(2) { 33 grid-row: 2/3; 34 justify-self: start; 35 background: blue; 36 } 37 38 .grid > :nth-child(3) { 39 grid-row: 1/2; 40 justify-self: end; 41 background: yellow; 42 } 43 44 .grid > :nth-child(4) { 45 grid-row: 2/3; 46 justify-self: end; 47 background: red; 48 } 49 </style> 50 </head> 51 <body> 52 <div class="grid"> 53 <div>X XX X</div> 54 <div>XX X<br>X XXX X<br>XX XXX</div> 55 <div>X XX X</div> 56 <div>XX X<br>X XXX<br>X<br>XX XXX</div> 57 </div> 58 59 <div class="grid" style="direction: rtl;"> 60 <div>X XX X</div> 61 <div>XX X<br>X XXX X<br>XX XXX</div> 62 <div>X XX X</div> 63 <div>XX X<br>X XXX<br>X<br>XX XXX</div> 64 </div> 65 </body> 66 </html>