column-grid-lanes-intrinsic-sizing-oof.html (1276B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Grid Lanes Test: Grid Lanes layout intrinsic size with only OOF children</title> 6 <link rel="author" title="Yanling Wang" href="mailto:yanlingwang@microsoft.com"> 7 <link rel="help" href="https://drafts.csswg.org/css-grid-3/#track-sizing"> 8 <link rel="help" href="https://drafts.csswg.org/css-grid-3/#abspos"> 9 <link rel="match" href="column-grid-lanes-intrinsic-sizing-oof-ref.html"> 10 <style> 11 .container { 12 border: 2px solid black; 13 margin: 10px; 14 width: 300px; 15 position: relative; 16 } 17 18 .grid-lanes { 19 display: grid-lanes; 20 grid-template-columns: repeat(3, auto); 21 border: 2px solid blue; 22 } 23 24 .oof-item { 25 position: absolute; 26 background: red; 27 color: white; 28 padding: 5px; 29 border: 1px solid darkred; 30 } 31 32 .oof-1 { 33 top: 50px; 34 left: 50px; 35 width: 60px; 36 height: 40px; 37 } 38 39 .oof-2 { 40 top: 100px; 41 left: 150px; 42 width: 70px; 43 height: 50px; 44 } 45 </style> 46 </head> 47 <body> 48 <div class="container"> 49 <div class="grid-lanes"> 50 <div class="oof-item oof-1"></div> 51 <div class="oof-item oof-2"></div> 52 </div> 53 </div> 54 </body> 55 </html>