row-track-sizing-001-ref.html (3242B)
1 <!DOCTYPE html> 2 <html> 3 <link rel="help" href="https://drafts.csswg.org/css-grid-3"> 4 <style> 5 .grid { 6 display: grid; 7 grid-template-rows: 5% repeat(3, 10px 15%) repeat(1, 15px 5px 20px); 8 grid-template-columns: 100px 100px 100px 100px 100px; 9 height: 500px; 10 gap: 10px; 11 } 12 </style> 13 <body> 14 <p>Test that grid-lanes tracks are correctly sized.</p> 15 <div class="grid"> 16 <div style="height: 100%; width: 50px; background: orange;"></div> 17 <div style="height: 100%; width: 60px; background: pink; transform: translateX(-50px);"></div> 18 <div style="height: 100%; width: 40px; background: lime; transform: translateX(-90px);"></div> 19 20 <div style="height: 100%; width: 30px; background: yellow; grid-column: 1;"></div> 21 <div style="height: 100%; width: 100px; background: blue; transform: translateX(-70px);"></div> 22 23 <div style="height: 100%; width: 25px; background: green; grid-column: 1;"></div> 24 <div style="height: 100%; width: 25px; background: green; transform: translateX(-75px);"></div> 25 <div style="height: 100%; width: 90px; background: teal; transform: translateX(-150px);"></div> 26 27 <div style="height: 100%; width: 100px; background: blue; grid-column: 1;"></div> 28 <div style="height: 100%; width: 80px; background: purple;"></div> 29 30 <div style="height: 100%; width: 80px; background: purple; grid-column: 1;"></div> 31 <div style="height: 100%; width: 50px; background: orange; transform: translateX(-20px);"></div> 32 33 <div style="height: 100%; width: 60px; background: pink; grid-column: 1;"></div> 34 <div style="height: 100%; width: 15px; background: coral; transform: translateX(-40px);"></div> 35 <div style="height: 100%; width: 30px; background: yellow; transform: translateX(-125px);"></div> 36 <div style="height: 100%; width: 90px; background: teal; transform: translateX(-195px);"></div> 37 38 <div style="height: 100%; width: 40px; background: lime; grid-column: 1;"></div> 39 <div style="height: 100%; width: 80px; background: purple; transform: translateX(-60px);"></div> 40 <div style="height: 100%; width: 10px; background: fuchsia; transform: translateX(-80px);"></div> 41 42 <div style="height: 100%; width: 90px; background: teal; grid-column: 1;"></div> 43 <div style="height: 100%; width: 25px; background: green; transform: translateX(-10px);"></div> 44 <div style="height: 100%; width: 15px; background: coral; transform: translateX(-85px);"></div> 45 46 <div style="height: 100%; width: 15px; background: coral; grid-column: 1;"></div> 47 <div style="height: 100%; width: 30px; background: yellow; transform: translateX(-85px);"></div> 48 <div style="height: 100%; width: 40px; background: lime; transform: translateX(-155px);"></div> 49 <div style="height: 100%; width: 60px; background: pink; transform: translateX(-215px);"></div> 50 51 <div style="height: 100%; width: 10px; background: fuchsia; grid-column: 1;"></div> 52 <div style="height: 100%; width: 50px; background: orange; transform: translateX(-90px);"></div> 53 <div style="height: 100%; width: 10px; background: fuchsia; transform: translateX(-140px);"></div> 54 <div style="height: 100%; width: 100px; background: blue; transform: translateX(-230px);"></div> 55 </div> 56 </body> 57 </html>