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