row-grid-lanes-out-of-flow-002-ref.html (1553B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <style> 6 .container { 7 width: 150px; 8 height: 300px; 9 border: 2px solid black; 10 margin: 20px; 11 } 12 13 .grid { 14 display: grid; 15 grid-template-rows: repeat(4, 60px); 16 grid-template-columns: auto; 17 border: 1px solid blue; 18 padding: 10px; 19 gap: 5px; 20 position: relative; 21 } 22 23 .item { 24 background: lightblue; 25 padding: 5px; 26 width: 40px; 27 } 28 29 .wrapper { 30 background: lightgreen; 31 padding: 5px; 32 width: 30px; 33 height: 30px; 34 border: 1px dashed green; 35 } 36 37 .absolute { 38 position: absolute; 39 grid-row: 1 / 2; 40 background: red; 41 left: 20px; 42 width: 20px; 43 height: 20px; 44 } 45 46 .static-pos-with-grid-row { 47 position: absolute; 48 background: yellow; 49 grid-row: 2 / 3; 50 width: 10px; 51 height: 10px; 52 } 53 54 .static-pos { 55 position: absolute; 56 background: orange; 57 width: 10px; 58 height: 10px; 59 } 60 </style> 61 </head> 62 <body> 63 <div class="container"> 64 <div class="grid"> 65 <div class="item"> 66 <div class="wrapper"> 67 <div class="absolute"></div> 68 </div> 69 </div> 70 <div class="item"> 71 <div class="wrapper"> 72 <div class="static-pos-with-grid-row"></div> 73 </div> 74 </div> 75 <div class="item"> 76 <div class="static-pos"></div> 77 </div> 78 <div class="item"></div> 79 </div> 80 </div> 81 </body> 82 </html>