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