row-grid-lanes-out-of-flow-002.html (1871B)
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-002-ref.html"> 9 <style> 10 .container { 11 width: 150px; 12 height: 300px; 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, 60px); 21 border: 1px solid blue; 22 padding: 10px; 23 gap: 5px; 24 position: relative; 25 } 26 27 .item { 28 background: lightblue; 29 padding: 5px; 30 width: 40px; 31 } 32 33 .wrapper { 34 background: lightgreen; 35 padding: 5px; 36 width: 30px; 37 height: 30px; 38 border: 1px dashed green; 39 } 40 41 .absolute { 42 position: absolute; 43 background: red; 44 grid-row: 1 / 2; 45 left: 20px; 46 width: 20px; 47 height: 20px; 48 } 49 50 .static-pos-with-grid-row { 51 position: absolute; 52 background: yellow; 53 grid-row: 2 / 3; 54 width: 10px; 55 height: 10px; 56 } 57 58 .static-pos { 59 position: absolute; 60 background: orange; 61 width: 10px; 62 height: 10px; 63 } 64 </style> 65 </head> 66 <body> 67 <div class="container"> 68 <div class="grid-lanes"> 69 <div class="item"> 70 <div class="wrapper"> 71 <div class="absolute"></div> 72 </div> 73 </div> 74 <div class="item"> 75 <div class="wrapper"> 76 <div class="static-pos-with-grid-row"></div> 77 </div> 78 </div> 79 <div class="item"> 80 <div class="static-pos"></div> 81 </div> 82 <div class="item"></div> 83 </div> 84 </div> 85 </body> 86 </html>