column-grid-lanes-alignment-positioned-items-001-ref.html (1239B)
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: 100px 150px; 14 grid-template-rows: 200px; 15 width: 300px; 16 background: grey; 17 gap: 10px; 18 padding: 10px; 19 } 20 21 .grid > div { 22 position: absolute; 23 } 24 25 .grid > :nth-child(1) { 26 grid-column: 1/2; 27 align-self: start; 28 background: green; 29 } 30 31 .grid > :nth-child(2) { 32 grid-column: 2/3; 33 align-self: start; 34 background: blue; 35 } 36 37 .grid > :nth-child(3) { 38 grid-column: 1/2; 39 align-self: end; 40 background: yellow; 41 } 42 43 .grid > :nth-child(4) { 44 grid-column: 2/3; 45 align-self: end; 46 background: red; 47 } 48 </style> 49 </head> 50 <body> 51 <div class="grid"> 52 <div>X XX X</div> 53 <div>XX X<br>X XXX X<br>XX XXX</div> 54 <div>X XX X</div> 55 <div>XX X<br>X XXX<br>X<br>XX XXX</div> 56 </div> 57 58 <div class="grid" style="direction: rtl;"> 59 <div>X XX X</div> 60 <div>XX X<br>X XXX X<br>XX XXX</div> 61 <div>X XX X</div> 62 <div>XX X<br>X XXX<br>X<br>XX XXX</div> 63 </div> 64 </body> 65 </html>