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