column-track-sizing-002-ref.html (882B)
1 <!DOCTYPE html> 2 <html> 3 <link rel="help" href="https://drafts.csswg.org/css-grid-3"> 4 <link rel="stylesheet" href="/fonts/ahem.css"> 5 <style> 6 .grid { 7 display: grid; 8 grid-template-columns: minmax(15px, min-content) max-content auto; 9 background-color: gray; 10 width: 100px; 11 font: 10px/1 Ahem; 12 } 13 </style> 14 <body> 15 <p>Test that grid-lanes tracks are correctly sized, and auto tracks are stretched.</p> 16 <div class="grid"> 17 <div style="grid-column: 1; background: green;">XXX XXX</div> 18 <div style="grid-column: 1 / 3; background: purple;">X XX X</div> 19 <div style="grid-column: 1; width: 30px; height: 1em; background: yellow;"></div> 20 <div style="grid-column: 2; width: 45px; height: 1em; background: orange;"></div> 21 <div style="grid-column: 3; width: 25px; height: 1em; background: blue; position: relative; top: -3em;"></div> 22 </div> 23 </body> 24 </html>