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