grid-track-intrinsic-sizing-003-ref.html (4292B)
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 (w/o span:1, with flex)</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 dashed; 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: 0px; 31 } 32 .g2 .d1 { 33 width: 0px; 34 } 35 .g2f .d1 { 36 width: 69px; 37 } 38 .g3 .d1 { 39 width: 0px; 40 } 41 .g4 .d1 { 42 width: 80px; 43 } 44 .g4f .d1 { 45 width: 104px; 46 } 47 .g5 .d1 { 48 width: 80px; 49 } 50 .g6 .d1 { 51 width: 0px; 52 } 53 .g6f .d1 { 54 width: 89px; 55 } 56 .g7 .d1 { 57 width: 0px; 58 } 59 .g8 .t { 60 width: 196px; 61 } 62 .g8 .d1 { 63 width: 200px; 64 } 65 .g9 .d1 { 66 width: 0px; 67 } 68 .gA .d1 { 69 width: 80px; 70 } 71 .gB .d1 { 72 width: 80px; 73 } 74 .gC .d1 { 75 width: 80px; 76 } 77 .gD .d1 { 78 width: 80px; 79 } 80 .d2 { 81 position: absolute; 82 bottom: 0; 83 right: 0; 84 background: blue; 85 } 86 .g1 .d2 { 87 width: 500px; 88 } 89 .g2 .d2 { 90 width: 500px; 91 } 92 .g2f .d2 { 93 right: auto; 94 left: 69px; 95 width: 35px; 96 } 97 .g3 .d2 { 98 width: 500px; 99 } 100 .g4 .d2 { 101 width: 420px; 102 } 103 .g4f .d2 { 104 right: auto; 105 left: 69px; 106 width: 35px; 107 } 108 .g5 .d2 { 109 width: 420px; 110 } 111 .g6 .d2 { 112 width: 500px; 113 } 114 .g6f .d2 { 115 right: auto; 116 left: 69px; 117 width: 35px; 118 } 119 .g7 .d2 { 120 width: 500px; 121 } 122 .g8 .d2 { 123 width: 300px; 124 } 125 .g9 .d2 { 126 width: 500px; 127 } 128 .gA .d2 { 129 width: 420px; 130 } 131 .gB .d2 { 132 width: 420px; 133 } 134 .gC .d2 { 135 width: 420px; 136 } 137 .gD .d2 { 138 width: 420px; 139 } 140 141 .t { grid-column: span 1; border:2px solid; } 142 div { min-width:0; min-height:10px; } 143 t { display:inline-block; width:20px; } 144 145 </style> 146 </head> 147 <body> 148 149 150 <div class="g1 grid"> 151 <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> 152 <div class="d1"></div><div class="d2"></div> 153 </div> 154 155 <div class="g2 grid"> 156 <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> 157 <div class="d1"></div><div class="d2"></div> 158 </div> 159 <div class="g2f 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><div class="d2"></div> 162 </div> 163 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><div class="d2"></div> 167 </div> 168 169 <div class="g4 grid"> 170 <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> 171 <div class="d1"></div><div class="d2"></div> 172 </div> 173 <div class="g4f 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="g5 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 183 <div class="g6 grid"> 184 <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> 185 <div class="d1"></div><div class="d2"></div> 186 </div> 187 <div class="g6f 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="g7 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 197 <div class="g8 grid"> 198 <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> 199 <div class="d1"></div><div class="d2"></div> 200 </div> 201 202 <div class="g9 grid"> 203 <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> 204 <div class="d1"></div><div class="d2"></div> 205 </div> 206 207 <div class="gA grid"> 208 <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> 209 <div class="d1"></div><div class="d2"></div> 210 </div> 211 212 <div class="gB grid"> 213 <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> 214 <div class="d1"></div><div class="d2"></div> 215 </div> 216 217 <div class="gC 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><div class="d2"></div> 220 </div> 221 222 <div class="gD grid"> 223 <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> 224 <div class="d1"></div><div class="d2"></div> 225 </div> 226 227 </body> 228 </html>