row-track-sizing-001.html (2630B)
1 <!DOCTYPE html> 2 <html> 3 <link rel="help" href="https://drafts.csswg.org/css-grid-3"> 4 <link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> 5 <link rel="match" href="row-track-sizing-001-ref.html"> 6 <style> 7 .grid-lanes { 8 display: grid-lanes; 9 flow-tolerance: 0; 10 grid-template-rows: 5% repeat(3, 10px 15%) repeat(1, 15px 5px 20px); 11 height: 500px; 12 gap: 10px; 13 } 14 </style> 15 <body> 16 <p>Test that grid-lanes tracks are correctly sized.</p> 17 <div class="grid-lanes"> 18 <div style="height: 100%; width: 50px; background: orange;"></div> 19 <div style="height: 100%; width: 30px; background: yellow;"></div> 20 <div style="height: 100%; width: 25px; background: green;"></div> 21 <div style="height: 100%; width: 100px; background: blue;"></div> 22 <div style="height: 100%; width: 80px; background: purple;"></div> 23 <div style="height: 100%; width: 60px; background: pink;"></div> 24 <div style="height: 100%; width: 40px; background: lime;"></div> 25 <div style="height: 100%; width: 90px; background: teal;"></div> 26 <div style="height: 100%; width: 15px; background: coral;"></div> 27 <div style="height: 100%; width: 10px; background: fuchsia;"></div> 28 29 <div style="height: 100%; width: 50px; background: orange;"></div> 30 <div style="height: 100%; width: 30px; background: yellow;"></div> 31 <div style="height: 100%; width: 25px; background: green;"></div> 32 <div style="height: 100%; width: 100px; background: blue;"></div> 33 <div style="height: 100%; width: 80px; background: purple;"></div> 34 <div style="height: 100%; width: 60px; background: pink;"></div> 35 <div style="height: 100%; width: 40px; background: lime;"></div> 36 <div style="height: 100%; width: 90px; background: teal;"></div> 37 <div style="height: 100%; width: 15px; background: coral;"></div> 38 <div style="height: 100%; width: 10px; background: fuchsia;"></div> 39 40 <div style="height: 100%; width: 50px; background: orange;"></div> 41 <div style="height: 100%; width: 30px; background: yellow;"></div> 42 <div style="height: 100%; width: 25px; background: green;"></div> 43 <div style="height: 100%; width: 100px; background: blue;"></div> 44 <div style="height: 100%; width: 80px; background: purple;"></div> 45 <div style="height: 100%; width: 60px; background: pink;"></div> 46 <div style="height: 100%; width: 40px; background: lime;"></div> 47 <div style="height: 100%; width: 90px; background: teal;"></div> 48 <div style="height: 100%; width: 15px; background: coral;"></div> 49 <div style="height: 100%; width: 10px; background: fuchsia;"></div> 50 </div> 51 </body> 52 </html>