row-track-sizing-005.html (2016B)
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-005-ref.html"> 6 <style> 7 .grid-lanes { 8 display: grid-lanes; 9 grid-lanes-direction: row; 10 flow-tolerance: 0; 11 grid-template-rows: auto auto auto; 12 gap: 10px; 13 background: lightgoldenrodyellow; 14 } 15 </style> 16 <body> 17 <p>Test that grid-lanes tracks are correctly sized with mix of explicit and auto item placement.</p> 18 <div class="grid-lanes"> 19 <div style="width: 50px; height: 50px; background: orange;"></div> 20 <div style="width: 30px; height: 30px; background: yellow;"></div> 21 <div style="width: 25px; height: 25px; background: green;"></div> 22 <div style="width: 100px; height: 100px; background: blue; grid-row: 3;"></div> 23 <div style="width: 80px; height: 80px; background: purple;"></div> 24 <div style="width: 60px; height: 60px; background: pink;"></div> 25 <div style="width: 40px; height: 40px; background: lime;"></div> 26 <div style="width: 90px; height: 90px; background: teal; grid-row: 1;"></div> 27 <div style="width: 15px; height: 15px; background: coral;"></div> 28 <div style="width: 10px; height: 10px; background: fuchsia;"></div> 29 30 <div style="height: 100%; width: 50px; background: orange;"></div> 31 <div style="height: 100%; width: 30px; background: yellow;"></div> 32 <div style="height: 100%; width: 25px; background: green;"></div> 33 <div style="height: 100%; width: 100px; background: blue;"></div> 34 <div style="height: 100%; width: 80px; background: purple;"></div> 35 <div style="height: 100%; width: 60px; background: pink;"></div> 36 <div style="height: 100%; width: 40px; background: lime;"></div> 37 <div style="height: 100%; width: 90px; background: teal;"></div> 38 <div style="height: 100%; width: 15px; background: coral;"></div> 39 <div style="height: 100%; width: 10px; background: fuchsia;"></div> 40 </div> 41 </body> 42 </html>