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