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