grid-flex-min-sizing-002-ref.html (5641B)
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 } 18 19 .g0 { 20 display: grid; 21 grid-template-columns: minmax(min-content,min-content); 22 border:1px solid; 23 float: left; 24 margin-right: 20px; 25 } 26 27 .g1 { 28 grid-template-columns: 24px 29 minmax(0,0) 30 minmax(0,0) 31 1fr; 32 min-width: 24px; 33 } 34 35 .g2 { 36 grid-template-columns: min-content 37 0 38 0 39 1fr; 40 } 41 42 .g3 { 43 grid-template-columns: min-content 44 0 45 0 46 1fr; 47 } 48 49 .g4 { 50 grid-template-columns: minmax(2px,0) 51 1px 52 1px 53 0; 54 } 55 56 .g5 { 57 grid-template-columns: minmax(20px,0) 58 minmax(0,0) 59 minmax(0,0) 60 0; 61 } 62 63 .g6 { 64 grid-template-columns: minmax(1.333333px,0) 65 minmax(1.333333px,0) 66 minmax(1.333333px,0) 67 20px; 68 } 69 70 .g7 { 71 grid-template-columns: minmax(20px,1fr) 72 minmax(min-content,0) 73 minmax(min-content,0) 74 20px; 75 } 76 77 .g8 { 78 grid-template-columns: minmax(min-content,1fr) 79 minmax(min-content,0) 80 minmax(min-content,0) 81 20px; 82 } 83 84 .g9 { 85 grid-template-columns: 20px 86 30px 87 minmax(min-content,0) 88 10px; 89 } 90 91 .gA { 92 grid-template-columns: minmax(min-content,0) 93 minmax(min-content,40px) 94 minmax(min-content,0) 95 20px; 96 } 97 98 .gB { 99 grid-template-columns: 24px 100 0 101 0 102 20px; 103 min-width: 44px; 104 } 105 106 .gC { 107 grid-template-columns: minmax(24px,0) 108 0 109 0 110 20px; 111 min-width: 44px; 112 } 113 114 .gD { 115 grid-template-columns: minmax(24px,0) 116 0 117 0 118 0; 119 } 120 121 .gE { 122 grid-template-columns: minmax(8px,0) 123 minmax(8px,0) 124 minmax(8px,0) 125 0px; 126 } 127 128 .gF { 129 grid-template-columns: 2px 130 20px 131 2px 132 0; 133 } 134 135 136 .t { grid-column: span 3; border:2px solid; } 137 .d1 { grid-column: 1 / span 2; background: grey; } 138 .d3 { grid-column: 3 / span 2; background: blue; } 139 div { min-width:0; min-height:10px; } 140 t { display:inline-block; width:20px; } 141 142 </style> 143 </head> 144 <body> 145 146 147 <div class="g0"> 148 <div class="g1 grid"> 149 <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> 150 <div class="d1"></div> 151 <div class="d3"></div> 152 </div> 153 </div> 154 155 <div class="g0"> 156 <div class="g2 grid"> 157 <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> 158 <div class="d1"></div> 159 <div class="d3"></div> 160 </div> 161 </div> 162 163 <div class="g0"> 164 <div class="g3 grid"> 165 <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> 166 <div class="d1"></div> 167 <div class="d3"></div> 168 </div> 169 </div> 170 171 <div class="g0"> 172 <div class="g4 grid"> 173 <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> 174 <div class="d1"></div> 175 <div class="d3"></div> 176 </div> 177 </div> 178 179 <div class="g0"> 180 <div class="g5 grid"> 181 <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> 182 <div class="d1"></div> 183 <div class="d3"></div> 184 </div> 185 </div> 186 187 <br clear="all" style="margin-top:100px"> 188 189 <div class="g0"> 190 <div class="g6 grid"> 191 <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> 192 <div class="d1"></div> 193 <div class="d3"></div> 194 </div> 195 </div> 196 197 <div class="g0"> 198 <div class="g7 grid"> 199 <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> 200 <div class="d1"></div> 201 <div class="d3"></div> 202 </div> 203 </div> 204 205 <div class="g0"> 206 <div class="g9 grid"> 207 <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> 208 <div class="d1"></div> 209 <div class="d3"></div> 210 </div> 211 </div> 212 213 <br clear="all" style="margin-top:100px"> 214 215 <div class="g0"> 216 <div class="gA grid"> 217 <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> 218 <div class="d1"></div> 219 <div class="d3"></div> 220 </div> 221 </div> 222 223 <div class="g0"> 224 <div class="gB grid"> 225 <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> 226 <div class="d1"></div> 227 <div class="d3"></div> 228 </div> 229 </div> 230 231 <div class="g0"> 232 <div class="gC grid"> 233 <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> 234 <div class="d1"></div> 235 <div class="d3"></div> 236 </div> 237 </div> 238 239 <div class="g0"> 240 <div class="gD grid"> 241 <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> 242 <div class="d1"></div> 243 <div class="d3"></div> 244 </div> 245 </div> 246 247 <div class="g0"> 248 <div class="gE grid"> 249 <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> 250 <div class="d1"></div> 251 <div class="d3"></div> 252 </div> 253 </div> 254 255 <div class="g0"> 256 <div class="gF 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 </div> 262 263 264 </body> 265 </html>