column-track-sizing-001-ref.html (3101B)
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-columns: 5% repeat(3, 10px 15%) repeat(1, 15px 5px 20px); 8 width: 500px; 9 gap: 10px; 10 } 11 </style> 12 <body> 13 <p>Test that grid-lanes tracks are correctly sized.</p> 14 <div class="grid"> 15 <div style="width: 100%; height: 50px; background: orange;"></div> 16 <div style="width: 100%; height: 30px; background: yellow;"></div> 17 <div style="width: 100%; height: 25px; background: green;"></div> 18 <div style="width: 100%; height: 100px; background: blue;"></div> 19 <div style="width: 100%; height: 80px; background: purple;"></div> 20 <div style="width: 100%; height: 60px; background: pink;"></div> 21 <div style="width: 100%; height: 40px; background: lime;"></div> 22 <div style="width: 100%; height: 90px; background: teal;"></div> 23 <div style="width: 100%; height: 15px; background: coral;"></div> 24 <div style="width: 100%; height: 10px; background: fuchsia;"></div> 25 26 <div style="width: 100%; height: 60px; background: pink; transform: translateY(-50px);"></div> 27 <div style="width: 100%; height: 100px; background: blue; transform: translateY(-70px);"></div> 28 <div style="width: 100%; height: 25px; background: green; transform: translateY(-75px);"></div> 29 <div style="width: 100%; height: 80px; background: purple;"></div> 30 <div style="width: 100%; height: 50px; background: orange; transform: translateY(-20px);"></div> 31 <div style="width: 100%; height: 15px; background: coral; transform: translateY(-40px);"></div> 32 <div style="width: 100%; height: 80px; background: purple; transform: translateY(-60px);"></div> 33 <div style="width: 100%; height: 25px; background: green; transform: translateY(-10px);"></div> 34 <div style="width: 100%; height: 30px; background: yellow; transform: translateY(-85px);"></div> 35 <div style="width: 100%; height: 50px; background: orange; transform: translateY(-90px);"></div> 36 37 <div style="width: 100%; height: 40px; background: lime; transform: translateY(-90px);"></div> 38 <div style="width: 100%; height: 90px; background: teal; grid-column: 3; transform: translateY(-150px);"></div> 39 <div style="width: 100%; height: 30px; background: yellow; grid-column: 6; transform: translateY(-125px);"></div> 40 <div style="width: 100%; height: 10px; background: fuchsia; transform: translateY(-80px);"></div> 41 <div style="width: 100%; height: 15px; background: coral; transform: translateY(-85px);"></div> 42 <div style="width: 100%; height: 40px; background: lime; transform: translateY(-155px);"></div> 43 <div style="width: 100%; height: 10px; background: fuchsia; transform: translateY(-140px);"></div> 44 45 <div style="width: 100%; height: 90px; background: teal; grid-column: 6; transform: translateY(-185px);"></div> 46 <div style="width: 100%; height: 60px; background: pink; grid-column: 9; transform: translateY(-205px);"></div> 47 <div style="width: 100%; height: 100px; background: blue; transform: translateY(-220px);"></div> 48 49 </div> 50 </body> 51 </html>