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