grid-track-intrinsic-sizing-002.html (5528B)
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)</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-002-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 } 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(min-content,auto) 65 minmax(min-content,max-content) 66 minmax(1fr,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; } 106 .d1 { grid-column: 1 / span 2; background: grey; } 107 div { min-width:0; min-height:10px; } 108 t { display:inline-block; width:20px; } 109 110 </style> 111 </head> 112 <body> 113 114 <div class="g1 grid"> 115 <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> 116 <div class="d1"></div> 117 </div> 118 119 <div class="g2 grid"> 120 <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> 121 <div class="d1"></div> 122 </div> 123 <div class="g2f grid"> 124 <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> 125 <div class="d1"></div> 126 </div> 127 128 <div class="g3 grid"> 129 <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> 130 <div class="d1"></div> 131 </div> 132 133 <div class="g4 grid"> 134 <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> 135 <div class="d1"></div> 136 </div> 137 <div class="g4f grid"> 138 <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> 139 <div class="d1"></div> 140 </div> 141 142 <div class="g5 grid"> 143 <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> 144 <div class="d1"></div> 145 </div> 146 147 <div class="g6 grid"> 148 <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> 149 <div class="d1"></div> 150 </div> 151 <div class="g6f grid"> 152 <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> 153 <div class="d1"></div> 154 </div> 155 156 <div class="g7 grid"> 157 <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> 158 <div class="d1"></div> 159 </div> 160 161 <div class="g8 grid"> 162 <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> 163 <div class="d1"></div> 164 </div> 165 166 <div class="g9 grid"> 167 <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> 168 <div class="d1"></div> 169 </div> 170 171 <div class="gA grid"> 172 <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> 173 <div class="d1"></div> 174 </div> 175 176 <div class="gB grid"> 177 <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> 178 <div class="d1"></div> 179 </div> 180 181 <div class="gC grid"> 182 <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> 183 <div class="d1"></div> 184 </div> 185 186 <div class="gD grid"> 187 <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> 188 <div class="d1"></div> 189 </div> 190 191 </body> 192 </html>