grid-auto-repeat-multiple-values-003.html (3038B)
1 <!DOCTYPE html> 2 <html> 3 <link rel="author" title="Mozilla" href="https://mozilla.org"> 4 <link rel="help" href="https://drafts.csswg.org/css-grid/#typedef-auto-repeat"> 5 <link rel="match" href="grid-auto-repeat-multiple-values-003-ref.html"> 6 <head> 7 <style> 8 9 .holder { 10 height: 30px; 11 width: 300px; 12 border-bottom: 2px solid #cfbfcf; 13 } 14 15 .wide-holder { 16 height: 30px; 17 width: 650px; 18 border-bottom: 2px solid #cfbfcf; 19 } 20 21 .grid-container { 22 display: grid; 23 grid-template-columns: 10px 20px repeat(auto-fit, 30px 40px) 50px 60px; 24 grid-template-rows: repeat(auto-fill, minmax(30px, auto)); 25 } 26 27 .grid-container > :nth-child(2n) { background: sienna; } 28 .grid-container > :nth-child(2n+1) { background: orange; } 29 </style> 30 </head> 31 32 <body> 33 <p>The test passes if it has the same visual effect as reference.</p> 34 <div class="holder"> 35 <div class="grid-container"> 36 <div></div> 37 <div></div> 38 <div></div> 39 <div></div> 40 <div></div> 41 <div></div> 42 </div> 43 </div> 44 45 <div class="holder"> 46 <div class="grid-container"> 47 <div></div> 48 <div></div> 49 <div></div> 50 <div></div> 51 <div></div> 52 <div style="grid-column: 7;"></div> 53 </div> 54 </div> 55 <!-- Test correct tracking of collapsed tracks --> 56 <div class="holder" style="width: 650px"> 57 <div class="grid-container"> 58 <div style="grid-column: 2;"></div> 59 <div></div> 60 <div style="grid-column: 6;"></div> 61 <div></div> 62 <div></div> 63 <div></div> 64 </div> 65 </div> 66 <div class="holder" style="width: 650px"> 67 <div class="grid-container"> 68 <div style="grid-column: 2;"></div> 69 <div></div> 70 <div style="grid-column: 10;"></div> 71 <div></div> 72 <div></div> 73 <div></div> 74 </div> 75 </div> 76 <div class="holder" style="width: 650px"> 77 <div class="grid-container"> 78 <div style="grid-column: 2;"></div> 79 <div></div> 80 <div style="grid-column: 12;"></div> 81 <div></div> 82 <div></div> 83 <div></div> 84 </div> 85 </div> 86 <div class="holder"> 87 <div class="grid-container"> 88 <div style="grid-column: 2;"></div> 89 <div></div> 90 <div style="grid-column: 5;"></div> 91 <div></div> 92 <div></div> 93 <div></div> 94 </div> 95 </div> 96 <div class="holder"> 97 <div class="grid-container"> 98 <div></div> 99 <div></div> 100 <div style="grid-column: 5;"></div> 101 <div></div> 102 <div></div> 103 <div></div> 104 </div> 105 </div> 106 <!-- Test correct tracking of collapsed tracks when the grid begins in the middle of the repeat. --> 107 <div class="holder"> 108 <div class="grid-container"> 109 <div style="grid-column: 4;"></div> 110 <div></div> 111 <div></div> 112 <div></div> 113 <div></div> 114 <div></div> 115 </div> 116 </div> 117 <!-- Test grid span with correct tracking of collapsed tracks. --> 118 <div class="holder" style="width: 510px"> 119 <div class="grid-container"> 120 <div></div> 121 <div style="grid-column: 4 / 7;"></div> 122 <div></div> 123 </div> 124 </div> 125 </body> 126 127 </html>