column-grid-lanes-intrinsic-sizing-oof-ref.html (891B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <style> 6 .container { 7 border: 2px solid black; 8 margin: 10px; 9 width: 300px; 10 position: relative; 11 } 12 13 .grid { 14 display: grid; 15 grid-template-columns: repeat(3, auto); 16 grid-template-rows: auto; 17 border: 2px solid blue; 18 } 19 20 .oof-item { 21 position: absolute; 22 background: red; 23 color: white; 24 padding: 5px; 25 border: 1px solid darkred; 26 } 27 28 .oof-1 { 29 top: 50px; 30 left: 50px; 31 width: 60px; 32 height: 40px; 33 } 34 35 .oof-2 { 36 top: 100px; 37 left: 150px; 38 width: 70px; 39 height: 50px; 40 } 41 </style> 42 </head> 43 <body> 44 <div class="container"> 45 <div class="grid"> 46 <div class="oof-item oof-1"></div> 47 <div class="oof-item oof-2"></div> 48 </div> 49 </div> 50 </body> 51 </html>