grid-flex-min-sizing-001-ref.html (7851B)
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>Reference: flex/auto min-sizing</title> 9 <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212"> 10 <style type="text/css"> 11 body,html { color:black; background:white; font-family:monospace; font-size:16px; padding:0; margin:0; } 12 13 .grid { 14 display: grid; 15 border: 1px solid; 16 float: left; 17 min-width:100px; 18 } 19 .fixed .grid { 20 width:140px; 21 } 22 23 .g1 { 24 grid-template-columns: 24px 25 minmax(0,0) 26 minmax(0,0) 27 1fr; 28 min-width:104px; 29 } 30 31 .g2 { 32 grid-template-columns: minmax(0,max-content) 33 minmax(0,0) 34 minmax(0,0) 35 1fr; 36 } 37 38 .g3 { 39 grid-template-columns: minmax(0,auto) 40 minmax(0,0) 41 minmax(0,0) 42 1fr; 43 } 44 45 .g4 { 46 grid-template-columns: minmax(2px,0) 47 minmax(1px,0) 48 minmax(1px,0) 49 1fr; 50 } 51 52 .g5 { 53 grid-template-columns: minmax(20px,0) 54 minmax(0,0) 55 minmax(0,0) 56 1fr; 57 } 58 59 .g6 { 60 grid-template-columns: minmax(2px,0) 61 minmax(1px,0) 62 minmax(1px,0) 63 20px; 64 } 65 66 .g7 { 67 grid-template-columns: minmax(20px,1fr) 68 minmax(0,0) 69 minmax(0,0) 70 20px; 71 } 72 73 .g8 { 74 grid-template-columns: minmax(0,1fr) 75 minmax(0,0) 76 minmax(0,0) 77 20px; 78 } 79 80 .g9 { 81 grid-template-columns: 20px 82 30px 83 minmax(0,0) 84 10px; 85 } 86 87 .gA { 88 grid-template-columns: minmax(0,0) 89 minmax(min-content,40px) 90 minmax(0,0) 91 20px; 92 } 93 94 .gB { 95 grid-template-columns: minmax(0,0) 96 minmax(auto,40px) 97 minmax(0,0) 98 20px; 99 } 100 101 .gC { 102 grid-template-columns: minmax(0,20px) 103 minmax(0,40px) 104 minmax(0,0) 105 20px; 106 } 107 108 .gD { 109 grid-template-columns: minmax(auto,20px) 110 minmax(auto,40px) 111 minmax(0,0) 112 min-content; 113 } 114 115 .gE { 116 grid-template-columns: minmax(0,20px) 117 minmax(0,40px) 118 minmax(0,20px) 119 auto; 120 } 121 122 .gF { 123 grid-template-columns: minmax(0,20px) 124 44px 125 minmax(0,40px) 126 auto; 127 } 128 129 130 .t { grid-column: span 3; border:2px solid; } 131 .d1 { grid-column: 1 / span 2; background: grey; } 132 .d3 { grid-column: 3 / span 2; background: blue; } 133 div { min-width:0; min-height:10px; } 134 t { display:inline-block; width:20px; } 135 136 </style> 137 </head> 138 <body> 139 140 141 <div class="g1 grid"> 142 <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> 143 <div class="d1"></div> 144 <div class="d3"></div> 145 </div> 146 147 <div class="g2 grid"> 148 <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> 149 <div class="d1"></div> 150 <div class="d3"></div> 151 </div> 152 153 <div class="g3 grid"> 154 <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> 155 <div class="d1"></div> 156 <div class="d3"></div> 157 </div> 158 159 <div class="g4 grid"> 160 <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> 161 <div class="d1"></div> 162 <div class="d3"></div> 163 </div> 164 165 <div class="g5 grid"> 166 <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> 167 <div class="d1"></div> 168 <div class="d3"></div> 169 </div> 170 171 <br clear="all" style="margin-top:100px"> 172 173 <div class="g6 grid"> 174 <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> 175 <div class="d1"></div> 176 <div class="d3"></div> 177 </div> 178 179 <div class="g7 grid"> 180 <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> 181 <div class="d1"></div> 182 <div class="d3"></div> 183 </div> 184 185 <div class="g8 grid"> 186 <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> 187 <div class="d1"></div> 188 <div class="d3"></div> 189 </div> 190 191 <div class="g9 grid"> 192 <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> 193 <div class="d1"></div> 194 <div class="d3"></div> 195 </div> 196 197 <br clear="all" style="margin-top:100px"> 198 199 <div class="gA grid"> 200 <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> 201 <div class="d1"></div> 202 <div class="d3"></div> 203 </div> 204 205 <div class="gB grid"> 206 <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> 207 <div class="d1"></div> 208 <div class="d3"></div> 209 </div> 210 211 <div class="gC grid"> 212 <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> 213 <div class="d1"></div> 214 <div class="d3"></div> 215 </div> 216 217 <div class="gD grid"> 218 <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> 219 <div class="d1"></div> 220 <div class="d3"></div> 221 </div> 222 223 <div class="gE grid"> 224 <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> 225 <div class="d1"></div> 226 <div class="d3"></div> 227 </div> 228 229 <div class="gF grid"> 230 <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> 231 <div class="d1"></div> 232 <div class="d3"></div> 233 </div> 234 235 <br clear="all" style="margin-top:100px"> 236 237 <span class="fixed"> 238 <div class="g1 grid"> 239 <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> 240 <div class="d1"></div> 241 <div class="d3"></div> 242 </div> 243 244 <div class="g2 grid"> 245 <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> 246 <div class="d1"></div> 247 <div class="d3"></div> 248 </div> 249 250 <div class="g3 grid"> 251 <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> 252 <div class="d1"></div> 253 <div class="d3"></div> 254 </div> 255 256 <div class="g4 grid"> 257 <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> 258 <div class="d1"></div> 259 <div class="d3"></div> 260 </div> 261 262 <div class="g5 grid"> 263 <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> 264 <div class="d1"></div> 265 <div class="d3"></div> 266 </div> 267 268 <br clear="all" style="margin-top:100px"> 269 270 <div class="g6 grid"> 271 <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> 272 <div class="d1"></div> 273 <div class="d3"></div> 274 </div> 275 276 <div class="g7 grid"> 277 <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> 278 <div class="d1"></div> 279 <div class="d3"></div> 280 </div> 281 282 <div class="g8 grid"> 283 <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> 284 <div class="d1"></div> 285 <div class="d3"></div> 286 </div> 287 288 <div class="g9 grid"> 289 <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> 290 <div class="d1"></div> 291 <div class="d3"></div> 292 </div> 293 294 <br clear="all" style="margin-top:100px"> 295 296 <div class="gA grid"> 297 <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> 298 <div class="d1"></div> 299 <div class="d3"></div> 300 </div> 301 302 <div class="gB grid"> 303 <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> 304 <div class="d1"></div> 305 <div class="d3"></div> 306 </div> 307 308 <div class="gC grid"> 309 <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> 310 <div class="d1"></div> 311 <div class="d3"></div> 312 </div> 313 314 <div class="gD grid"> 315 <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> 316 <div class="d1"></div> 317 <div class="d3"></div> 318 </div> 319 320 <br clear="all" style="margin-top:100px"> 321 322 <div class="gE grid"> 323 <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> 324 <div class="d1"></div> 325 <div class="d3"></div> 326 </div> 327 328 <div class="gF grid"> 329 <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> 330 <div class="d1"></div> 331 <div class="d3"></div> 332 </div> 333 334 </span> 335 336 </body> 337 </html>