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