row-grid-lanes-alignment-positioned-items-001.html (1749B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Grid Lanes Test: Self-Alignment along row axis of absolute positioned items</title> 6 <link rel="author" title="Yanling Wang" href="mailto:yanlingwang@microsoft.com"> 7 <link rel="help" href="https://drafts.csswg.org/css-grid-3/#abspos"> 8 <link rel="help" href="https://drafts.csswg.org/css-grid-3/#alignment"> 9 <link rel="match" href="row-grid-lanes-alignment-positioned-items-001-ref.html"> 10 <style> 11 html,body { 12 color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0; 13 } 14 15 .grid-lanes { 16 position: relative; 17 display: grid-lanes; 18 grid-lanes-direction: row; 19 grid-template-rows: 100px 150px; 20 width: 200px; 21 height: 300px; 22 background: grey; 23 gap: 10px; 24 padding: 10px; 25 align-items: start; 26 } 27 28 .grid-lanes > div { 29 position: absolute; 30 } 31 32 .grid-lanes > :nth-child(1) { 33 grid-row: 1 / 2; 34 justify-self: start; 35 background: green; 36 } 37 38 .grid-lanes > :nth-child(2) { 39 grid-row: 2 / 3; 40 justify-self: start; 41 background: blue; 42 } 43 44 .grid-lanes > :nth-child(3) { 45 grid-row: 1 / 2; 46 justify-self: end; 47 background: yellow; 48 } 49 50 .grid-lanes > :nth-child(4) { 51 grid-row: 2 / 3; 52 justify-self: end; 53 background: red; 54 } 55 </style> 56 </head> 57 <body> 58 <div class="grid-lanes"> 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 65 <div class="grid-lanes" style="direction: rtl;"> 66 <div>X XX X</div> 67 <div>XX X<br>X XXX X<br>XX XXX</div> 68 <div>X XX X</div> 69 <div>XX X<br>X XXX<br>X<br>XX XXX</div> 70 </div> 71 </body> 72 </html>