Status: PASS | Duration: 7ms | Subtests: 1/1 | Open test on wpt.live | Open ref on wpt.live | wpt.fyi
<!DOCTYPE html> <html> <title>Auto-fit repeat tracks with auto size and auto/explicit spanning item placement</title> <link rel="help" href="https://drafts.csswg.org/css-grid-3"> <link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> <link rel="match" href="row-auto-repeat-auto-017-ref.html"> <style> .grid-lanes { display: grid-lanes; flow-tolerance: 0; grid-template-rows: 50px repeat(5, 50px) repeat(auto-fit, auto); width: 200px; height: 500px; gap: 10px; } .grid-lanes > div { height: 50px; width: 100px; background-color: orange; } </style> <div class="grid-lanes"> <div style="grid-row: span 4; height: 200px;">1</div> <div style="grid-row: 4 / span 2; height: 100px;">2</div> <div style="grid-row: 9 / span 2; height: 100px;">3</div> <div style="grid-row: 7;">4</div> <div style="grid-row: span 2; height: 100px;">5</div> <div>6</div> </div> </html>
<!DOCTYPE html> <html> <style> .grid-lanes { display: grid-lanes; grid-template-rows: repeat(9, auto); width: 200px; height: 500px; gap: 10px; } .grid-lanes > div { height: 50px; width: 100px; background-color: orange; } </style> <div class="grid-lanes"> <div style="grid-row: span 4; height: 200px;">1</div> <div style="grid-row: 4 / span 2; height: 100px;">2</div> <div style="grid-row: 8 / span 2; height: 100px;">3</div> <div style="grid-row: 7;">4</div> <div style="grid-row: span 2; height: 100px;">5</div> <div>6</div> </div> </html>