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