grid-auto-repeat-multiple-values-004.html (5069B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Grid Layout Test: auto-repeat with multiple tracks and line names</title> 6 <link rel="author" title="Mozilla" href="https://mozilla.org"> 7 <link rel="help" href="https://www.w3.org/TR/css-grid-1/#repeat-notation"> 8 <link rel="match" href="grid-auto-repeat-multiple-values-004-ref.html"> 9 <style> 10 .columns { 11 border: 1px solid black; 12 display: grid; 13 grid-template-columns: [u] repeat(auto-fill, [v] 10px [w] 10px [x] 10px [y]) [z]; 14 grid-auto-rows: 5px; 15 grid-column-gap: 3px; 16 /* Does not fit a whole-number of repetitions */ 17 width: 94px; 18 } 19 div > div { 20 background: blue; 21 } 22 </style> 23 </head> 24 <body> 25 <!-- u --> 26 <div class="columns"> 27 <div style="grid-column-start: u"></div> 28 </div> 29 <!-- Non-existant line name --> 30 <div class="columns"> 31 <div style="grid-column-start: nonesuch"></div> 32 </div> 33 <div class="columns"> 34 <div style="grid-column-start: u 1"></div> 35 </div> 36 <div class="columns"> 37 <div style="grid-column-start: u -1"></div> 38 </div> 39 <!-- Also non-existant, there is only one u --> 40 <div class="columns"> 41 <div style="grid-column-start: u 4"></div> 42 </div> 43 <div class="columns"> 44 <div style="grid-column-start: u 9"></div> 45 </div> 46 <div class="columns"> 47 <div style="grid-column-start: u 2"></div> 48 </div> 49 <div class="columns"> 50 <div style="grid-column-start: u -2"></div> 51 </div> 52 <div class="columns"> 53 <div style="grid-column-start: u -6"></div> 54 </div> 55 <div class="columns"> 56 <div style="grid-column-start: u -7"></div> 57 </div> 58 <!-- v --> 59 <div class="columns"> 60 <div style="grid-column-start: v"></div> 61 </div> 62 <div class="columns"> 63 <div style="grid-column-start: v 1"></div> 64 </div> 65 <div class="columns"> 66 <div style="grid-column-start: v 2"></div> 67 </div> 68 <div class="columns"> 69 <div style="grid-column-start: v -1"></div> 70 </div> 71 <div class="columns"> 72 <div style="grid-column-start: v -2"></div> 73 </div> 74 <!-- Also non-existant, there are only two v's --> 75 <div class="columns"> 76 <div style="grid-column-start: v 3"></div> 77 </div> 78 <div class="columns"> 79 <div style="grid-column-start: v -3"></div> 80 </div> 81 <!-- w --> 82 <div class="columns"> 83 <div style="grid-column-start: w"></div> 84 </div> 85 <div class="columns"> 86 <div style="grid-column-start: w 1"></div> 87 </div> 88 <div class="columns"> 89 <div style="grid-column-start: w 2"></div> 90 </div> 91 <div class="columns"> 92 <div style="grid-column-start: w -1"></div> 93 </div> 94 <div class="columns"> 95 <div style="grid-column-start: w -2"></div> 96 </div> 97 <!-- Also non-existant, there are only two w's --> 98 <div class="columns"> 99 <div style="grid-column-start: w 3"></div> 100 </div> 101 <div class="columns"> 102 <div style="grid-column-start: w -3"></div> 103 </div> 104 <!-- x --> 105 <div class="columns"> 106 <div style="grid-column-start: x"></div> 107 </div> 108 <div class="columns"> 109 <div style="grid-column-start: x 1"></div> 110 </div> 111 <div class="columns"> 112 <div style="grid-column-start: x 2"></div> 113 </div> 114 <div class="columns"> 115 <div style="grid-column-start: x -1"></div> 116 </div> 117 <div class="columns"> 118 <div style="grid-column-start: x -2"></div> 119 </div> 120 <!-- Also non-existant, there are only two x's --> 121 <div class="columns"> 122 <div style="grid-column-start: x 3"></div> 123 </div> 124 <div class="columns"> 125 <div style="grid-column-start: x -3"></div> 126 </div> 127 <!-- y --> 128 <div class="columns"> 129 <div style="grid-column-start: y"></div> 130 </div> 131 <div class="columns"> 132 <div style="grid-column-start: y 1"></div> 133 </div> 134 <div class="columns"> 135 <div style="grid-column-start: y 2"></div> 136 </div> 137 <div class="columns"> 138 <div style="grid-column-start: y -1"></div> 139 </div> 140 <div class="columns"> 141 <div style="grid-column-start: y -2"></div> 142 </div> 143 <!-- Also non-existant, there are only two y's --> 144 <div class="columns"> 145 <div style="grid-column-start: y -3"></div> 146 </div> 147 <div class="columns"> 148 <div style="grid-column-start: y 3"></div> 149 </div> 150 <!-- z --> 151 <div class="columns"> 152 <div style="grid-column-start: z"></div> 153 </div> 154 <div class="columns"> 155 <div style="grid-column-start: z 1"></div> 156 </div> 157 <div class="columns"> 158 <div style="grid-column-start: z -1"></div> 159 </div> 160 <!-- Also non-existant, there is only one z --> 161 <div class="columns"> 162 <div style="grid-column-start: z 2"></div> 163 </div> 164 <div class="columns"> 165 <div style="grid-column-start: z -2"></div> 166 </div> 167 </body> 168 </html>