grid-repeat-auto-fill-fit-001.html (10757B)
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-001-ref.html"> 12 <style type="text/css"> 13 html,body { 14 color:black; background-color:white; font-size:16px; padding:0; margin:0; 15 /* We use overflow:hidden on root scroller to work around bug 1873749: */ 16 overflow: hidden; 17 } 18 19 .grid { 20 display: grid; 21 position: relative; 22 border: 1px solid; 23 grid-auto-rows: 10px; 24 grid-gap: 2px; 25 margin-bottom: 2px; 26 padding-right: 3px; 27 } 28 .r1 { grid-template-columns: [a] repeat(auto-fill, [b] 20px [c]) [d]; } 29 .r2 { grid-template-columns: [a] repeat(auto-fill, [b] minmax(20px,20px) [c]) [d] 30px [e]; } 30 .r3 { grid-template-columns: [a] repeat(auto-fill, [b] 20px [c]) [d] 30px [e] 30px [f]; } 31 fit .r1 { grid-template-columns: [a] repeat(auto-fit, [b] 20px [c]) [d]; } 32 fit .r2 { grid-template-columns: [a] repeat(auto-fit, [b] 20px [c]) [d] 30px [e]; } 33 fit .r3 { grid-template-columns: [a] repeat(auto-fit, [b] 20px [c]) [d] 30px [e] 30px [f]; } 34 35 .w100 { width: 100px; } 36 .w50 { width: 50px; } 37 .w80 { width: 80px; } 38 .w42 { width: 42px; } 39 .xw42 { max-width: 42px; } 40 .mw42 { min-width: 42px; } 41 .mw100 { min-width: 100px; } 42 .mw50 { min-width: 50px; } 43 .mw80 { min-width: 80px; } 44 .xw100 { max-width: 100px; } 45 .xw50 { max-width: 50px; } 46 .xw80 { max-width: 80px; } 47 .pw10 { width: 10%; } 48 .pxw10 { max-width: 10%; } 49 .pmw10 { min-width: 10%; } 50 .cw10 { width: calc(50px + 10%); } 51 .cxw10 { max-width: calc(50px + 10%); } 52 .cmw10 { min-width: calc(50px - 10%); } 53 .float { float: left; } 54 55 x { 56 height: 10px; 57 background: grey; 58 } 59 a { 60 position: absolute; 61 left:0; right:0; top:0; height: 3px; 62 background: black; 63 grid-column: c / c -1; 64 } 65 b { 66 position: absolute; 67 left:0; right:0; bottom:0; height: 3px; 68 background: brown; 69 grid-column: auto / c -1; 70 } 71 72 x:first-child { 73 background: lime; 74 } 75 x:last-child { 76 background: blue; 77 } 78 79 fill,fit { 80 float: left; 81 width: 400px; 82 } 83 84 .zero-progress { 85 grid-column-gap: calc(10px - 1%); 86 grid-template-columns: [a] 10px repeat(auto-fill, [b] calc(1% - 10px) [c]) [d]; 87 } 88 </style> 89 </head> 90 <body> 91 92 <fill> 93 94 <div class="grid r1"><x></x><x></x><a></a><b></b><x></x></div> 95 <div class="grid r1 float"><x></x><x></x><a></a><b></b><x></x></div> 96 <div class="grid r1 w100"><x></x><x></x><a></a><b></b><x></x></div> 97 <div class="grid r1 w80"><x></x><x></x><a></a><b></b><x></x></div> 98 <div class="grid r1 w50"><x></x><x></x><a></a><b></b><x></x></div> 99 <div class="grid r1 xw80"><x></x><x></x><a></a><b></b><x></x></div> 100 <div class="grid r1 xw50"><x></x><x></x><a></a><b></b><x></x></div> 101 <div class="grid r1 mw80 xw50"><x></x><x></x><a></a><b></b><x></x></div> 102 <div class="grid r1 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div> 103 <div class="grid r1 w100 xw80 float"><x></x><x></x><a></a><b></b><x></x></div> 104 <div class="grid r1 xw80 float"><x></x><x></x><a></a><b></b><x></x></div> 105 <div class="grid r1 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> 106 <div class="grid r1 mw80 float"><x></x><x></x><a></a><b></b><x></x></div> 107 <div class="grid r1 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> 108 <div class="grid r1 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div> 109 <div class="grid r1 w42 float"><x></x><x></x><a></a><b></b><x></x></div> 110 <div class="grid r1 xw42 float"><x></x><x></x><a></a><b></b><x></x></div> 111 <div class="grid r1 mw42 float"><x></x><x></x><a></a><b></b><x></x></div> 112 113 <br clear="all"> 114 115 <div class="grid r1 pw10 xw80 float"><x></x><x></x><a></a><b></b><x></x></div> 116 <div class="grid r1 pxw10 float"><x></x><x></x><a></a><b></b><x></x></div> 117 <div class="grid r1 pmw10 float"><x></x><x></x><a></a><b></b><x></x></div> 118 <div class="grid r1 pmw10 xw50 float"><x></x><x></x><a></a><b></b><x></x></div> 119 <div class="grid r1 w100 pmw10 float"><x></x><x></x><a></a><b></b><x></x></div> 120 <div class="grid r1 pw10 pxw10 float"><x></x><x></x><a></a><b></b><x></x></div> 121 122 <br clear="all"> 123 124 <div class="grid r1 cw10 xw80 float"><x></x><x></x><a></a><b></b><x></x></div> 125 <div class="grid r1 cxw10 float"><x></x><x></x><a></a><b></b><x></x></div> 126 <div class="grid r1 cmw10 float"><x></x><x></x><a></a><b></b><x></x></div> 127 <div class="grid r1 cmw10 xw80 float"><x></x><x></x><a></a><b></b><x></x></div> 128 <div class="grid r1 w100 cmw10 float"><x></x><x></x><a></a><b></b><x></x></div> 129 <div class="grid r1 cw10 cxw10 float"><x></x><x></x><a></a><b></b><x></x></div> 130 131 <br clear="all"> 132 133 <div class="float"> 134 <div class="grid r1 pw10 xw80 float"><x></x><x></x><a></a><b></b><x></x></div> 135 <div class="grid r1 pxw10 float"><x></x><x></x><a></a><b></b><x></x></div> 136 <div class="grid r1 pmw10 float"><x></x><x></x><a></a><b></b><x></x></div> 137 <div class="grid r1 pmw10 xw50 float"><x></x><x></x><a></a><b></b><x></x></div> 138 <div class="grid r1 w100 pmw10 float"><x></x><x></x><a></a><b></b><x></x></div> 139 <div class="grid r1 pw10 pxw10 float"><x></x><x></x><a></a><b></b><x></x></div> 140 </div> 141 142 <br clear="all"> 143 144 <div class="float"> 145 <div class="grid r1 cw10 xw80 float"><x></x><x></x><a></a><b></b><x></x></div> 146 <div class="grid r1 cxw10 float"><x></x><x></x><a></a><b></b><x></x></div> 147 <div class="grid r1 cmw10 float"><x></x><x></x><a></a><b></b><x></x></div> 148 <div class="grid r1 cmw10 xw80 float"><x></x><x></x><a></a><b></b><x></x></div> 149 <div class="grid r1 w100 cmw10 float"><x></x><x></x><a></a><b></b><x></x></div> 150 <div class="grid r1 cw10 cxw10 float"><x></x><x></x><a></a><b></b><x></x></div> 151 </div> 152 153 <br clear="all"> 154 <br clear="all"> 155 156 <div class="grid r2"><x></x><x></x><a></a><b></b><x></x></div> 157 <div class="grid r2 float"><x></x><x></x><a></a><b></b><x></x></div> 158 <div class="grid r2 w100"><x></x><x></x><a></a><b></b><x></x></div> 159 <div class="grid r2 w80"><x></x><x></x><a></a><b></b><x></x></div> 160 <div class="grid r2 w50"><x></x><x></x><a></a><b></b><x></x></div> 161 <div class="grid r2 xw80"><x></x><x></x><a></a><b></b><x></x></div> 162 <div class="grid r2 xw50"><x></x><x></x><a></a><b></b><x></x></div> 163 <div class="grid r2 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div> 164 <div class="grid r2 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> 165 <div class="grid r2 mw80 float"><x></x><x></x><a></a><b></b><x></x></div> 166 <div class="grid r2 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> 167 <div class="grid r2 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div> 168 169 <br clear="all"> 170 <br clear="all"> 171 172 <div class="grid r3"><x></x><x></x><a></a><b></b><x></x></div> 173 <div class="grid r3 float"><x></x><x></x><a></a><b></b><x></x></div> 174 <div class="grid r3 w100"><x></x><x></x><a></a><b></b><x></x></div> 175 <div class="grid r3 w80"><x></x><x></x><a></a><b></b><x></x></div> 176 <div class="grid r3 w50"><x></x><x></x><a></a><b></b><x></x></div> 177 <div class="grid r3 xw80"><x></x><x></x><a></a><b></b><x></x></div> 178 <div class="grid r3 xw50"><x></x><x></x><a></a><b></b><x></x></div> 179 <div class="grid r3 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div> 180 <div class="grid r3 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> 181 <div class="grid r3 mw80 float"><x></x><x></x><a></a><b></b><x></x></div> 182 <div class="grid r3 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> 183 <div class="grid r3 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div> 184 185 </fill> 186 187 <fit> 188 189 <div class="grid r1"><x></x><x></x><a></a><b></b><x></x></div> 190 <div class="grid r1 float"><x></x><x></x><a></a><b></b><x></x></div> 191 <div class="grid r1 w100"><x></x><x></x><a></a><b></b><x></x></div> 192 <div class="grid r1 w80"><x></x><x></x><a></a><b></b><x></x></div> 193 <div class="grid r1 w50"><x></x><x></x><a></a><b></b><x></x></div> 194 <div class="grid r1 xw80"><x></x><x></x><a></a><b></b><x></x></div> 195 <div class="grid r1 xw50"><x></x><x></x><a></a><b></b><x></x></div> 196 <div class="grid r1 mw80 xw50"><x></x><x></x><a></a><b></b><x></x></div> 197 <div class="grid r1 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div> 198 <div class="grid r1 w100 xw80 float"><x></x><x></x><a></a><b></b><x></x></div> 199 <div class="grid r1 xw80 float"><x></x><x></x><a></a><b></b><x></x></div> 200 <div class="grid r1 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> 201 <div class="grid r1 mw80 float"><x></x><x></x><a></a><b></b><x></x></div> 202 <div class="grid r1 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> 203 <div class="grid r1 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div> 204 205 <br clear="all"> 206 <br clear="all"> 207 208 <div class="grid r2"><x></x><x></x><a></a><b></b><x></x></div> 209 <div class="grid r2 float"><x></x><x></x><a></a><b></b><x></x></div> 210 <div class="grid r2 w100"><x></x><x></x><a></a><b></b><x></x></div> 211 <div class="grid r2 w80"><x></x><x></x><a></a><b></b><x></x></div> 212 <div class="grid r2 w50"><x></x><x></x><a></a><b></b><x></x></div> 213 <div class="grid r2 xw80"><x></x><x></x><a></a><b></b><x></x></div> 214 <div class="grid r2 xw50"><x></x><x></x><a></a><b></b><x></x></div> 215 <div class="grid r2 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div> 216 <div class="grid r2 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> 217 <div class="grid r2 mw80 float"><x></x><x></x><a></a><b></b><x></x></div> 218 <div class="grid r2 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> 219 <div class="grid r2 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div> 220 221 <br clear="all"> 222 <br clear="all"> 223 224 <div class="grid r3"><x></x><x></x><a></a><b></b><x></x></div> 225 <div class="grid r3 float"><x></x><x></x><a></a><b></b><x></x></div> 226 <div class="grid r3 w100"><x></x><x></x><a></a><b></b><x></x></div> 227 <div class="grid r3 w80"><x></x><x></x><a></a><b></b><x></x></div> 228 <div class="grid r3 w50"><x></x><x></x><a></a><b></b><x></x></div> 229 <div class="grid r3 xw80"><x></x><x></x><a></a><b></b><x></x></div> 230 <div class="grid r3 xw50"><x></x><x></x><a></a><b></b><x></x></div> 231 <div class="grid r3 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div> 232 <div class="grid r3 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> 233 <div class="grid r3 mw80 float"><x></x><x></x><a></a><b></b><x></x></div> 234 <div class="grid r3 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> 235 <div class="grid r3 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div> 236 237 <br clear="all"> 238 <br clear="all"> 239 240 <div style="float:left"> 241 <div class="grid xw50 zero-progress"> 242 <x></x><x></x><a></a><b></b><x></x> 243 </div> 244 <div class="grid w50 zero-progress"> 245 <x></x><x></x><a></a><b></b><x></x> 246 </div> 247 <div class="grid mw50 zero-progress"> 248 <x></x><x></x><a></a><b></b><x></x> 249 </div> 250 </div> 251 252 </fit> 253 254 255 </body> 256 </html>