grid-repeat-auto-fill-fit-005.html (16455B)
1 <!DOCTYPE HTML> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <html><head> 7 <meta charset="utf-8"> 8 <title>CSS Grid Test: repeat(auto-fill/auto-fit)</title> 9 <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1118820"> 10 <link rel="help" href="https://drafts.csswg.org/css-grid/#valdef-repeat-auto-fill"> 11 <link rel="match" href="grid-repeat-auto-fill-fit-005-ref.html"> 12 <style type="text/css"> 13 html,body { 14 color:black; background-color:white; font-size:16px; 15 } 16 17 .grid { 18 display: grid; 19 float: left; 20 position: relative; 21 border: 2px solid; 22 grid-auto-columns: 10px; 23 grid-auto-rows: 10px; 24 grid-auto-flow: column; 25 grid-gap: 2px; 26 margin-right: 2px; 27 padding-top: 3px; 28 padding-bottom: 2px; 29 } 30 31 .r0 { grid-template-rows: [a] repeat(auto-fill, [b] 0 [c]) [d]; } 32 .r1 { grid-template-rows: [a] repeat(auto-fill, [b] 20px [c]) [d]; } 33 .r2 { grid-template-rows: [a] repeat(auto-fill, [b] 20px [c]) [d] 30px [e]; } 34 .r02 { grid-template-rows: [a] repeat(auto-fill, [b] 0 [c]) [d] 30px [e]; } 35 .r3 { grid-template-rows: [a] repeat(auto-fill, [b] 20px [c]) [d] 30px [e] 30px [f]; } 36 .r03 { grid-template-rows: [a] repeat(auto-fill, [b] 0 [c]) [d] 30px [e] 30px [f]; } 37 .ra { grid-template-rows: [a] repeat(auto-fill, [b] 20px [c]) [d] 30px [e] 10px [f]; } 38 39 fit .r0 { grid-template-rows: [a] repeat(auto-fit, [b] 0 [c]) [d]; } 40 fit .r1 { grid-template-rows: [a] repeat(auto-fit, [b] 20px [c]) [d]; } 41 fit .r2 { grid-template-rows: [a] repeat(auto-fit, [b] 20px [c]) [d] 30px [e]; } 42 fit .r02 { grid-template-rows: [a] repeat(auto-fit, [b] 0 [c]) [d] 30px [e]; } 43 fit .r3 { grid-template-rows: [a] repeat(auto-fit, [b] 20px [c]) [d] 30px [e] 30px [f]; } 44 fit .r03 { grid-template-rows: [a] repeat(auto-fit, [b] 0 [c]) [d] 30px [e] 30px [f]; } 45 fit .ra { grid-template-rows: [a] repeat(auto-fit, [b] 20px [c]) [d] 30px [e] 10px [f]; } 46 47 .w100 { height: 100px; } 48 .w3 { height: 3px; } 49 .w20 { height: 20px; } 50 .w50 { height: 50px; } 51 .w80 { height: 80px; } 52 .mw100 { min-height: 100px; } 53 .mw3 { height: 3px; } 54 .mw20 { height: 20px; } 55 .mw50 { min-height: 50px; } 56 .mw80 { min-height: 80px; } 57 .xw100 { max-height: 100px; } 58 .xw3 { height: 3px; } 59 .xw20 { height: 20px; } 60 .xw50 { max-height: 50px; } 61 .xw80 { max-height: 80px; } 62 63 .w { width:10px} 64 65 x { 66 height: 10px; 67 background: grey; 68 } 69 a { 70 position: absolute; 71 left:0; top:0; bottom:0; width: 3px; 72 background: black; 73 grid-row: c / c -1; 74 } 75 b { 76 position: absolute; 77 right:0; top:0; bottom:0; width: 3px; 78 background: brown; 79 grid-row: auto / c -1; 80 } 81 82 x:first-child { 83 background: lime; 84 } 85 x:last-child { 86 background: blue; 87 } 88 89 fill,fit { 90 float: left; 91 height: 400px; 92 } 93 </style> 94 </head> 95 <body> 96 97 <fill> 98 99 <div class="grid r1 w20"><x></x><x></x><a></a><b></b><x></x></div> 100 <div class="grid r1 w3"><x></x><x></x><a></a><b></b><x></x></div> 101 <div class="grid r1 xw20"><x></x><x></x><a></a><b></b><x></x></div> 102 <div class="grid r1 xw3"><x></x><x></x><a></a><b></b><x></x></div> 103 <div class="grid r1 mw20"><x></x><x></x><a></a><b></b><x></x></div> 104 <div class="grid r1 mw3"><x></x><x></x><a></a><b></b><x></x></div> 105 <div class="grid r1 w20 xw3"><x></x><x></x><a></a><b></b><x></x></div> 106 <div class="grid r1 w3 mw20"><x></x><x></x><a></a><b></b><x></x></div> 107 <div class="grid r1 w3 mw3"><x></x><x></x><a></a><b></b><x></x></div> 108 <div class="grid r1 xw20"><x></x><x></x><a></a><b></b><x></x></div> 109 <div class="grid r1 xw3 mw20"><x></x><x></x><a></a><b></b><x></x></div> 110 <div class="grid r1 mw20"><x></x><x></x><a></a><b></b><x></x></div> 111 112 <br clear="all"> 113 <br clear="all"> 114 115 <div class="grid r1 w w20"><a></a><b></b></div> 116 <div class="grid r1 w w3"><a></a><b></b></div> 117 <div class="grid r1 w xw20"><a></a><b></b></div> 118 <div class="grid r1 w xw3"><a></a><b></b></div> 119 <div class="grid r1 w mw20"><a></a><b></b></div> 120 <div class="grid r1 w mw3"><a></a><b></b></div> 121 <div class="grid r1 w w20 xw3"><a></a><b></b></div> 122 <div class="grid r1 w w3 mw20"><a></a><b></b></div> 123 <div class="grid r1 w w3 mw3"><a></a><b></b></div> 124 <div class="grid r1 w xw20"><a></a><b></b></div> 125 <div class="grid r1 w xw3 mw20"><a></a><b></b></div> 126 <div class="grid r1 w mw20"><a></a><b></b></div> 127 128 <div class="grid r1" style="min-height:0"><x></x><x></x><a></a><b></b><x></x></div> 129 <div class="grid r1" style="height:0"><x></x><x></x><a></a><b></b><x></x></div> 130 <div class="grid r1" style="min-height:0; height:0"><x></x><x></x><a></a><b></b><x></x></div> 131 <div class="grid r1" style="max-height:0"><x></x><x></x><a></a><b></b><x></x></div> 132 <div class="grid r0"><x></x><x></x><a></a><b></b><x></x></div> 133 <div class="grid ra"><x></x><x></x><a></a><b></b><x></x></div> 134 135 <div class="grid w r1" style="min-height:0"><a></a><b></b></div> 136 <div class="grid w r1" style="height:0"><a></a><b></b></div> 137 <div class="grid w r1" style="min-height:0; height:0"><a></a><b></b></div> 138 <div class="grid w r1" style="max-height:0"><a></a><b></b></div> 139 <div class="grid w r0"><a></a><b></b></div> 140 <div class="grid w ra"><a></a><b></b></div> 141 142 <br clear="all"> 143 <br clear="all"> 144 145 <div class="grid r2 w20"><x></x><x></x><a></a><b></b><x></x></div> 146 <div class="grid r2 w3"><x></x><x></x><a></a><b></b><x></x></div> 147 <div class="grid r2 xw20"><x></x><x></x><a></a><b></b><x></x></div> 148 <div class="grid r2 xw3"><x></x><x></x><a></a><b></b><x></x></div> 149 <div class="grid r2 mw20"><x></x><x></x><a></a><b></b><x></x></div> 150 <div class="grid r2 mw3"><x></x><x></x><a></a><b></b><x></x></div> 151 <div class="grid r2 w20 xw3"><x></x><x></x><a></a><b></b><x></x></div> 152 <div class="grid r2 w3 mw20"><x></x><x></x><a></a><b></b><x></x></div> 153 <div class="grid r2 w3 mw3"><x></x><x></x><a></a><b></b><x></x></div> 154 <div class="grid r2 xw20"><x></x><x></x><a></a><b></b><x></x></div> 155 <div class="grid r2 xw3 mw20"><x></x><x></x><a></a><b></b><x></x></div> 156 <div class="grid r2 mw20"><x></x><x></x><a></a><b></b><x></x></div> 157 158 <br clear="all"> 159 <br clear="all"> 160 161 <div class="grid r2 w w20"><a></a><b></b></div> 162 <div class="grid r2 w w3"><a></a><b></b></div> 163 <div class="grid r2 w xw20"><a></a><b></b></div> 164 <div class="grid r2 w xw3"><a></a><b></b></div> 165 <div class="grid r2 w mw20"><a></a><b></b></div> 166 <div class="grid r2 w mw3"><a></a><b></b></div> 167 <div class="grid r2 w w20 xw3"><a></a><b></b></div> 168 <div class="grid r2 w w3 mw20"><a></a><b></b></div> 169 <div class="grid r2 w w3 mw3"><a></a><b></b></div> 170 <div class="grid r2 w xw20"><a></a><b></b></div> 171 <div class="grid r2 w xw3 mw20"><a></a><b></b></div> 172 <div class="grid r2 w mw20"><a></a><b></b></div> 173 174 <div class="grid r2" style="min-height:0"><x></x><x></x><a></a><b></b><x></x></div> 175 <div class="grid r2" style="height:0"><x></x><x></x><a></a><b></b><x></x></div> 176 <div class="grid r2" style="min-height:0; height:0"><x></x><x></x><a></a><b></b><x></x></div> 177 <div class="grid r2" style="max-height:0"><x></x><x></x><a></a><b></b><x></x></div> 178 <div class="grid r0"><x></x><x></x><a></a><b></b><x></x></div> 179 <div class="grid ra"><x></x><x></x><a></a><b></b><x></x></div> 180 181 <div class="grid w r2" style="min-height:0"><a></a><b></b></div> 182 <div class="grid w r2" style="height:0"><a></a><b></b></div> 183 <div class="grid w r2" style="min-height:0; height:0"><a></a><b></b></div> 184 <div class="grid w r2" style="max-height:0"><a></a><b></b></div> 185 <div class="grid w r02"><a></a><b></b></div> 186 187 188 <br clear="all"> 189 <br clear="all"> 190 191 <div class="grid r3 w20"><x></x><x></x><a></a><b></b><x></x></div> 192 <div class="grid r3 w3"><x></x><x></x><a></a><b></b><x></x></div> 193 <div class="grid r3 xw20"><x></x><x></x><a></a><b></b><x></x></div> 194 <div class="grid r3 xw3"><x></x><x></x><a></a><b></b><x></x></div> 195 <div class="grid r3 mw20"><x></x><x></x><a></a><b></b><x></x></div> 196 <div class="grid r3 mw3"><x></x><x></x><a></a><b></b><x></x></div> 197 <div class="grid r3 w20 xw3"><x></x><x></x><a></a><b></b><x></x></div> 198 <div class="grid r3 w3 mw20"><x></x><x></x><a></a><b></b><x></x></div> 199 <div class="grid r3 w3 mw3"><x></x><x></x><a></a><b></b><x></x></div> 200 <div class="grid r3 xw20"><x></x><x></x><a></a><b></b><x></x></div> 201 <div class="grid r3 xw3 mw20"><x></x><x></x><a></a><b></b><x></x></div> 202 <div class="grid r3 mw20"><x></x><x></x><a></a><b></b><x></x></div> 203 204 <br clear="all"> 205 <br clear="all"> 206 207 <div class="grid r3 w w20"><a></a><b></b></div> 208 <div class="grid r3 w w3"><a></a><b></b></div> 209 <div class="grid r3 w xw20"><a></a><b></b></div> 210 <div class="grid r3 w xw3"><a></a><b></b></div> 211 <div class="grid r3 w mw20"><a></a><b></b></div> 212 <div class="grid r3 w mw3"><a></a><b></b></div> 213 <div class="grid r3 w w20 xw3"><a></a><b></b></div> 214 <div class="grid r3 w w3 mw20"><a></a><b></b></div> 215 <div class="grid r3 w w3 mw3"><a></a><b></b></div> 216 <div class="grid r3 w xw20"><a></a><b></b></div> 217 <div class="grid r3 w xw3 mw20"><a></a><b></b></div> 218 <div class="grid r3 w mw20"><a></a><b></b></div> 219 220 <div class="grid r3" style="min-height:0"><x></x><x></x><a></a><b></b><x></x></div> 221 <div class="grid r3" style="height:0"><x></x><x></x><a></a><b></b><x></x></div> 222 <div class="grid r3" style="min-height:0; height:0"><x></x><x></x><a></a><b></b><x></x></div> 223 <div class="grid r3" style="max-height:0"><x></x><x></x><a></a><b></b><x></x></div> 224 <div class="grid r0"><x></x><x></x><a></a><b></b><x></x></div> 225 <div class="grid ra"><x></x><x></x><a></a><b></b><x></x></div> 226 227 <div class="grid w r3" style="min-height:0"><a></a><b></b></div> 228 <div class="grid w r3" style="height:0"><a></a><b></b></div> 229 <div class="grid w r3" style="min-height:0; height:0"><a></a><b></b></div> 230 <div class="grid w r3" style="max-height:0"><a></a><b></b></div> 231 <div class="grid w r03"><a></a><b></b></div> 232 233 234 </fill> 235 236 <fit> 237 238 <div class="grid r1 w20"><x></x><x></x><a></a><b></b><x></x></div> 239 <div class="grid r1 w3"><x></x><x></x><a></a><b></b><x></x></div> 240 <div class="grid r1 xw20"><x></x><x></x><a></a><b></b><x></x></div> 241 <div class="grid r1 xw3"><x></x><x></x><a></a><b></b><x></x></div> 242 <div class="grid r1 mw20"><x></x><x></x><a></a><b></b><x></x></div> 243 <div class="grid r1 mw3"><x></x><x></x><a></a><b></b><x></x></div> 244 <div class="grid r1 w20 xw3"><x></x><x></x><a></a><b></b><x></x></div> 245 <div class="grid r1 w3 mw20"><x></x><x></x><a></a><b></b><x></x></div> 246 <div class="grid r1 w3 mw3"><x></x><x></x><a></a><b></b><x></x></div> 247 <div class="grid r1 xw20"><x></x><x></x><a></a><b></b><x></x></div> 248 <div class="grid r1 xw3 mw20"><x></x><x></x><a></a><b></b><x></x></div> 249 <div class="grid r1 mw20"><x></x><x></x><a></a><b></b><x></x></div> 250 251 <br clear="all"> 252 <br clear="all"> 253 254 <div class="grid r1 w w20"><a></a><b></b></div> 255 <div class="grid r1 w w3"><a></a><b></b></div> 256 <div class="grid r1 w xw20"><a></a><b></b></div> 257 <div class="grid r1 w xw3"><a></a><b></b></div> 258 <div class="grid r1 w mw20"><a></a><b></b></div> 259 <div class="grid r1 w mw3"><a></a><b></b></div> 260 <div class="grid r1 w w20 xw3"><a></a><b></b></div> 261 <div class="grid r1 w w3 mw20"><a></a><b></b></div> 262 <div class="grid r1 w w3 mw3"><a></a><b></b></div> 263 <div class="grid r1 w xw20"><a></a><b></b></div> 264 <div class="grid r1 w xw3 mw20"><a></a><b></b></div> 265 <div class="grid r1 w mw20"><a></a><b></b></div> 266 267 <div class="grid r1" style="min-height:0"><x></x><x></x><a></a><b></b><x></x></div> 268 <div class="grid r1" style="height:0"><x></x><x></x><a></a><b></b><x></x></div> 269 <div class="grid r1" style="min-height:0; height:0"><x></x><x></x><a></a><b></b><x></x></div> 270 <div class="grid r1" style="max-height:0"><x></x><x></x><a></a><b></b><x></x></div> 271 <div class="grid r0"><x></x><x></x><a></a><b></b><x></x></div> 272 <div class="grid ra"><x></x><x></x><a></a><b></b><x></x></div> 273 274 <div class="grid w r1" style="min-height:0"><a></a><b></b></div> 275 <div class="grid w r1" style="height:0"><a></a><b></b></div> 276 <div class="grid w r1" style="min-height:0; height:0"><a></a><b></b></div> 277 <div class="grid w r1" style="max-height:0"><a></a><b></b></div> 278 <div class="grid w r0"><a></a><b></b></div> 279 <div class="grid w ra"><a></a><b></b></div> 280 281 <br clear="all"> 282 <br clear="all"> 283 284 <div class="grid r2 w20"><x></x><x></x><a></a><b></b><x></x></div> 285 <div class="grid r2 w3"><x></x><x></x><a></a><b></b><x></x></div> 286 <div class="grid r2 xw20"><x></x><x></x><a></a><b></b><x></x></div> 287 <div class="grid r2 xw3"><x></x><x></x><a></a><b></b><x></x></div> 288 <div class="grid r2 mw20"><x></x><x></x><a></a><b></b><x></x></div> 289 <div class="grid r2 mw3"><x></x><x></x><a></a><b></b><x></x></div> 290 <div class="grid r2 w20 xw3"><x></x><x></x><a></a><b></b><x></x></div> 291 <div class="grid r2 w3 mw20"><x></x><x></x><a></a><b></b><x></x></div> 292 <div class="grid r2 w3 mw3"><x></x><x></x><a></a><b></b><x></x></div> 293 <div class="grid r2 xw20"><x></x><x></x><a></a><b></b><x></x></div> 294 <div class="grid r2 xw3 mw20"><x></x><x></x><a></a><b></b><x></x></div> 295 <div class="grid r2 mw20"><x></x><x></x><a></a><b></b><x></x></div> 296 297 <br clear="all"> 298 <br clear="all"> 299 300 <div class="grid r2 w w20"><a></a><b></b></div> 301 <div class="grid r2 w w3"><a></a><b></b></div> 302 <div class="grid r2 w xw20"><a></a><b></b></div> 303 <div class="grid r2 w xw3"><a></a><b></b></div> 304 <div class="grid r2 w mw20"><a></a><b></b></div> 305 <div class="grid r2 w mw3"><a></a><b></b></div> 306 <div class="grid r2 w w20 xw3"><a></a><b></b></div> 307 <div class="grid r2 w w3 mw20"><a></a><b></b></div> 308 <div class="grid r2 w w3 mw3"><a></a><b></b></div> 309 <div class="grid r2 w xw20"><a></a><b></b></div> 310 <div class="grid r2 w xw3 mw20"><a></a><b></b></div> 311 <div class="grid r2 w mw20"><a></a><b></b></div> 312 313 <div class="grid r2" style="min-height:0"><x></x><x></x><a></a><b></b><x></x></div> 314 <div class="grid r2" style="height:0"><x></x><x></x><a></a><b></b><x></x></div> 315 <div class="grid r2" style="min-height:0; height:0"><x></x><x></x><a></a><b></b><x></x></div> 316 <div class="grid r2" style="max-height:0"><x></x><x></x><a></a><b></b><x></x></div> 317 <div class="grid r0"><x></x><x></x><a></a><b></b><x></x></div> 318 <div class="grid ra"><x></x><x></x><a></a><b></b><x></x></div> 319 320 <div class="grid w r2" style="min-height:0"><a></a><b></b></div> 321 <div class="grid w r2" style="height:0"><a></a><b></b></div> 322 <div class="grid w r2" style="min-height:0; height:0"><a></a><b></b></div> 323 <div class="grid w r2" style="max-height:0"><a></a><b></b></div> 324 <div class="grid w r02"><a></a><b></b></div> 325 326 327 <br clear="all"> 328 <br clear="all"> 329 330 <div class="grid r3 w20"><x></x><x></x><a></a><b></b><x></x></div> 331 <div class="grid r3 w3"><x></x><x></x><a></a><b></b><x></x></div> 332 <div class="grid r3 xw20"><x></x><x></x><a></a><b></b><x></x></div> 333 <div class="grid r3 xw3"><x></x><x></x><a></a><b></b><x></x></div> 334 <div class="grid r3 mw20"><x></x><x></x><a></a><b></b><x></x></div> 335 <div class="grid r3 mw3"><x></x><x></x><a></a><b></b><x></x></div> 336 <div class="grid r3 w20 xw3"><x></x><x></x><a></a><b></b><x></x></div> 337 <div class="grid r3 w3 mw20"><x></x><x></x><a></a><b></b><x></x></div> 338 <div class="grid r3 w3 mw3"><x></x><x></x><a></a><b></b><x></x></div> 339 <div class="grid r3 xw20"><x></x><x></x><a></a><b></b><x></x></div> 340 <div class="grid r3 xw3 mw20"><x></x><x></x><a></a><b></b><x></x></div> 341 <div class="grid r3 mw20"><x></x><x></x><a></a><b></b><x></x></div> 342 343 <br clear="all"> 344 <br clear="all"> 345 346 <div class="grid r3 w w20"><a></a><b></b></div> 347 <div class="grid r3 w w3"><a></a><b></b></div> 348 <div class="grid r3 w xw20"><a></a><b></b></div> 349 <div class="grid r3 w xw3"><a></a><b></b></div> 350 <div class="grid r3 w mw20"><a></a><b></b></div> 351 <div class="grid r3 w mw3"><a></a><b></b></div> 352 <div class="grid r3 w w20 xw3"><a></a><b></b></div> 353 <div class="grid r3 w w3 mw20"><a></a><b></b></div> 354 <div class="grid r3 w w3 mw3"><a></a><b></b></div> 355 <div class="grid r3 w xw20"><a></a><b></b></div> 356 <div class="grid r3 w xw3 mw20"><a></a><b></b></div> 357 <div class="grid r3 w mw20"><a></a><b></b></div> 358 359 <div class="grid r3" style="min-height:0"><x></x><x></x><a></a><b></b><x></x></div> 360 <div class="grid r3" style="height:0"><x></x><x></x><a></a><b></b><x></x></div> 361 <div class="grid r3" style="min-height:0; height:0"><x></x><x></x><a></a><b></b><x></x></div> 362 <div class="grid r3" style="max-height:0"><x></x><x></x><a></a><b></b><x></x></div> 363 <div class="grid r0"><x></x><x></x><a></a><b></b><x></x></div> 364 <div class="grid ra"><x></x><x></x><a></a><b></b><x></x></div> 365 366 <div class="grid w r3" style="min-height:0"><a></a><b></b></div> 367 <div class="grid w r3" style="height:0"><a></a><b></b></div> 368 <div class="grid w r3" style="min-height:0; height:0"><a></a><b></b></div> 369 <div class="grid w r3" style="max-height:0"><a></a><b></b></div> 370 <div class="grid w r03"><a></a><b></b></div> 371 372 373 </fit> 374 375 376 </body> 377 </html>