grid-track-sizing-002-ref.html (4850B)
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: freezing tracks in step 2.5 of the Track Sizing Algorithm</title> 9 <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1225368"> 10 <style> 11 body,html { color:black; background:white; font-size:16px; padding:0; margin:0; } 12 13 .grid { 14 display: block; 15 float: left; 16 grid-template-rows: 20px; 17 justify-items: start; 18 margin-right: 5px; 19 } 20 21 x { 22 display: block; 23 min-width: 0; 24 width: 30px; 25 height: 20px; 26 background: grey; 27 } 28 .grid div { 29 grid-column:1/span 2; 30 min-width: 0; 31 width: 100px; 32 height: 20px; 33 background: black; 34 } 35 div div:nth-child(2n+1) { 36 background: grey; 37 } 38 .grid.c3 div { 39 margin-right: 30px; 40 } 41 y { display: block; width: 130px; } 42 </style> 43 </head> 44 <body> 45 46 <div class="grid"> 47 <x></x> 48 <div></div> 49 </div> 50 51 <div class="grid"> 52 <x></x> 53 <div></div> 54 <div></div> 55 </div> 56 57 <div class="grid"> 58 <x></x> 59 <div></div> 60 <div></div> 61 <div></div> 62 </div> 63 64 <div class="grid"> 65 <x></x> 66 <div style="width:80px"></div> 67 <div></div> 68 <div></div> 69 <div></div> 70 </div> 71 72 <div class="grid" style="grid-auto-columns: minmax(0,auto)"> 73 <x></x> 74 <div></div> 75 <div></div> 76 <div></div> 77 <div></div> 78 </div> 79 80 <div class="grid" style="grid-auto-columns: minmax(0,auto)"> 81 <x></x> 82 <div style="width:80px"></div> 83 <div></div> 84 <div></div> 85 <div></div> 86 </div> 87 88 <div class="grid" style="grid-template-columns: minmax(0,auto) 0"> 89 <x></x> 90 <div></div> 91 </div> 92 93 <br clear=all> 94 95 <div class="grid" style="grid-template-columns: minmax(0,auto) 0"> 96 <x></x> 97 <div></div> 98 <div></div> 99 </div> 100 101 <div class="grid" style="grid-template-columns: minmax(0,auto) 0"> 102 <x></x> 103 <div style="width:80px"></div> 104 <div></div> 105 <div></div> 106 </div> 107 108 <div class="grid" style="grid-template-columns: minmax(0,auto) 0"> 109 <x></x> 110 <div style="width:80px"></div> 111 <div></div> 112 <div></div> 113 <div></div> 114 </div> 115 116 <div class="grid c3" style="grid-template-columns: minmax(0,auto) 0 auto"> 117 <x></x> 118 <div></div> 119 </div> 120 121 <div class="grid c3" style="grid-template-columns: minmax(0,auto) 0 auto"> 122 <x></x> 123 <div></div> 124 <div></div> 125 </div> 126 127 <div class="grid c3" style="grid-template-columns: minmax(0,auto) 0 auto"> 128 <x></x> 129 <div style="width:80px"></div> 130 <div></div> 131 </div> 132 133 <div class="grid c3" style="grid-template-columns: minmax(0,auto) 0 auto"> 134 <x></x> 135 <div style="width:80px"></div> 136 <div></div> 137 <div></div> 138 <div></div> 139 </div> 140 141 <br clear=all> 142 143 <div class="grid c3" style="grid-template-columns: minmax(0,auto) 10px auto"> 144 <x></x> 145 <div></div> 146 </div> 147 148 <div class="grid c3" style="grid-template-columns: minmax(0,auto) 10px auto"> 149 <x></x> 150 <div></div> 151 <div></div> 152 </div> 153 154 <div class="grid c3" style="grid-template-columns: minmax(0,auto) 10px auto"> 155 <x></x> 156 <div style="width:80px"></div> 157 <div></div> 158 </div> 159 160 <div class="grid c3" style="grid-template-columns: minmax(0,auto) 10px auto"> 161 <x></x> 162 <div style="width:80px"></div> 163 <div></div> 164 <div></div> 165 <div></div> 166 </div> 167 168 <div class="grid c3" style="grid-template-columns: minmax(0,auto) min-content auto"> 169 <x></x> 170 <div></div> 171 <y></y> 172 </div> 173 174 <div class="grid c3" style="grid-template-columns: minmax(0,auto) min-content auto"> 175 <x></x> 176 <div></div> 177 <div></div> 178 <y></y> 179 </div> 180 181 <div class="grid c3" style="grid-template-columns: minmax(0,auto) min-content auto"> 182 <x></x> 183 <div style="width:80px"></div> 184 <div></div> 185 <y></y> 186 </div> 187 188 <br clear=all> 189 190 <div class="grid c3" style="grid-template-columns: minmax(0,auto) min-content auto"> 191 <x></x> 192 <div style="width:80px"></div> 193 <div></div> 194 <div></div> 195 <div></div> 196 <y></y> 197 </div> 198 199 <div class="grid c3" style="grid-template-columns: minmax(0,auto) auto auto"> 200 <x></x> 201 <div></div> 202 </div> 203 204 <div class="grid c3" style="grid-template-columns: minmax(0,auto) auto auto"> 205 <x></x> 206 <div></div> 207 <div></div> 208 </div> 209 210 <div class="grid c3" style="grid-template-columns: minmax(0,auto) auto auto"> 211 <x></x> 212 <div style="grid-row:2; grid-column:span 2"></div> 213 <div></div> 214 </div> 215 216 <div class="grid c3" style="grid-template-columns: minmax(0,auto) auto auto"> 217 <x></x> 218 <div style="width:80px"></div> 219 <div></div> 220 </div> 221 222 <div class="grid c3" style="grid-template-columns: minmax(0,auto) auto auto"> 223 <x></x> 224 <div style="width:80px"></div> 225 <div style="grid-column:span 2"></div> 226 </div> 227 228 <div class="grid c3" style="grid-template-columns: minmax(0,auto) auto auto"> 229 <x></x> 230 <div style="grid-row:2; grid-column:span 2; width:80px"></div> 231 <div></div> 232 </div> 233 234 <div class="grid c3" style="grid-template-columns: minmax(0,auto) auto auto"> 235 <x></x> 236 <div style="width:80px"></div> 237 <div></div> 238 <div></div> 239 <div></div> 240 </div> 241 242 </body> 243 </html>