column-auto-repeat-014.html (1327B)
1 <!DOCTYPE html> 2 <title>Auto repeat tracks with multiple tracks.</title> 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="column-auto-repeat-014-ref.html"> 6 <style> 7 .grid-lanes { 8 display: grid-lanes; 9 border: solid thick; 10 grid-template-columns: 10px 20px repeat(auto-fill, 30px 40px) 50px 60px; 11 width: 300px; 12 background: pink; 13 } 14 .grid-lanes > :nth-child(2n) { 15 background: sienna; 16 } 17 .grid-lanes > :nth-child(2n+1) { 18 background: orange; 19 } 20 .grid-lanes > div { 21 width: 100%; 22 height: 25px; 23 } 24 .holder { 25 height: 30px; 26 width: 300px; 27 border-bottom: 2px solid #cfbfcf; 28 } 29 </style> 30 <p>The test passes if it has the same visual effect as reference.</p> 31 <div class="holder"> 32 <div class="grid-lanes"> 33 <div></div> 34 <div></div> 35 <div></div> 36 <div></div> 37 <div></div> 38 <div></div> 39 </div> 40 </div> 41 42 <div class="holder"> 43 <div class="grid-lanes"> 44 <div></div> 45 <div></div> 46 <div></div> 47 <div></div> 48 <div></div> 49 <div style="grid-column: 7;"></div> 50 </div> 51 </div> 52 53 <div class="holder"> 54 <div class="grid-lanes"> 55 <div style="grid-column: 2;"></div> 56 <div></div> 57 <div style="grid-column: 5;"></div> 58 <div></div> 59 <div></div> 60 <div></div> 61 </div> 62 </div>