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