column-grid-lanes-alignment-positioned-items-001.html (1731B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Grid Lanes Test: Self-Alignment along column 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="column-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-template-columns: 100px 150px; 19 width: 300px; 20 height: 200px; 21 background: grey; 22 gap: 10px; 23 padding: 10px; 24 justify-items: start; 25 } 26 27 .grid-lanes > div { 28 position: absolute; 29 } 30 31 .grid-lanes > :nth-child(1) { 32 grid-column: 1 / 2; 33 align-self: start; 34 background: green; 35 } 36 37 .grid-lanes > :nth-child(2) { 38 grid-column: 2 / 3; 39 align-self: start; 40 background: blue; 41 } 42 43 .grid-lanes > :nth-child(3) { 44 grid-column: 1 / 2; 45 align-self: end; 46 background: yellow; 47 } 48 49 .grid-lanes > :nth-child(4) { 50 grid-column: 2 / 3; 51 align-self: end; 52 background: red; 53 } 54 </style> 55 </head> 56 <body> 57 <div class="grid-lanes"> 58 <div>X XX X</div> 59 <div>XX X<br>X XXX X<br>XX XXX</div> 60 <div>X XX X</div> 61 <div>XX X<br>X XXX<br>X<br>XX XXX</div> 62 </div> 63 64 <div class="grid-lanes" style="direction: rtl;"> 65 <div>X XX X</div> 66 <div>XX X<br>X XXX X<br>XX XXX</div> 67 <div>X XX X</div> 68 <div>XX X<br>X XXX<br>X<br>XX XXX</div> 69 </div> 70 </body> 71 </html>