column-grid-lanes-out-of-flow-003-ref.html (1315B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <style> 6 .container { 7 width: 500px; 8 height: 400px; 9 position: relative; 10 border: 2px solid black; 11 margin: 20px; 12 } 13 14 .grid { 15 display: grid; 16 grid-template-columns: 50px 100px 150px; 17 grid-template-rows: auto; 18 border: 5px solid blue; 19 margin: 20px 30px; 20 padding: 5px 15px; 21 gap: 10px; 22 } 23 24 .grid-item { 25 background: lightgray; 26 padding: 10px; 27 height: 200px; 28 } 29 30 .nested-container { 31 background: lightgreen; 32 padding: 5px; 33 border: 1px solid green; 34 } 35 36 .absolute { 37 position: absolute; 38 background: red; 39 width: 60px; 40 height: 40px; 41 top: 50px; 42 left: 100px; 43 border: 1px solid darkred; 44 } 45 46 .static-pos { 47 position: absolute; 48 background: orange; 49 width: 10px; 50 height: 10px; 51 } 52 </style> 53 </head> 54 <body> 55 <div class="container"> 56 <div class="grid"> 57 <div class="grid-item"> 58 <div class="nested-container"> 59 <div class="absolute"></div> 60 </div> 61 </div> 62 <div class="grid-item"></div> 63 <div class="grid-item"></div> 64 <div class="static-pos"></div> 65 </div> 66 </div> 67 </body> 68 </html>