column-grid-lanes-out-of-flow-001.html (1939B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Grid Lanes Test: Grid Lanes layout out-of-flow positioning</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="match" href="column-grid-lanes-out-of-flow-001-ref.html"> 9 <style> 10 .container { 11 width: 900px; 12 height: 900px; 13 border: 2px solid black; 14 margin: 20px; 15 } 16 17 .grid-lanes { 18 display: grid-lanes; 19 grid-template-columns: repeat(4, 10rem); 20 justify-content: center; 21 position: relative; 22 height: 800px; 23 width: 40rem; 24 padding: 20px; 25 gap: 10px; 26 border: 1px dashed #999; 27 } 28 29 .abspos-first { 30 grid-column: span 2; 31 position: absolute; 32 top: 70px; 33 bottom: 440px; 34 left: 80px; 35 right: 30px; 36 background: blue; 37 } 38 39 .abspos-second { 40 grid-column: 4 / 5; 41 position: absolute; 42 top: 10px; 43 left: 10px; 44 background: red; 45 } 46 47 .abspos-third { 48 grid-column: 4 / 5; 49 position: absolute; 50 width: 50px; 51 height: 60px; 52 background: yellow; 53 align-self: end; 54 } 55 56 .fixedpos { 57 position: fixed; 58 top: 50%; 59 right: 0; 60 background: green; 61 width: 60px; 62 height: 60px; 63 } 64 65 .static-span-two { 66 position: absolute; 67 width: 120px; 68 height: 30px; 69 background: lightcoral; 70 border: 2px solid red; 71 grid-column: span 2; 72 } 73 </style> 74 </head> 75 <body> 76 <div class="container"> 77 <div class="grid-lanes"> 78 <div class="abspos-first"></div> 79 <div class="abspos-second"></div> 80 <div class="abspos-third"></div> 81 <div class="fixedpos"></div> 82 <div class="static-span-two"></div> 83 </div> 84 </div> 85 </body> 86 </html>