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