3 Any copyright is dedicated to the Public Domain.
4 http://creativecommons.org/publicdomain/zero/1.0/
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; }
17 border: 1px solid black
;
19 justify-content: start
;
22 .float { width:auto
; float:left
; }
24 grid-template-columns: minmax
(0,auto
)
25 minmax
(max-content
,auto
)
26 minmax
(max-content
,max-content
);
29 grid-template-columns: minmax
(max-content
,auto
)
30 minmax
(min-content
,auto
)
31 minmax
(max-content
,max-content
);
34 grid-template-columns: minmax
(max-content
,auto
)
36 minmax
(max-content
,max-content
);
39 grid-template-columns: minmax
(max-content
,max-content
)
40 minmax
(min-content
,max-content
)
41 minmax
(max-content
,max-content
);
44 grid-template-columns: minmax
(max-content
,max-content
)
45 minmax
(min-content
,max-content
)
46 minmax
(min-content
,max-content
);
49 grid-template-columns: minmax
(max-content
,max-content
)
50 minmax
(1fr,max-content
)
51 minmax
(min-content
,max-content
);
54 grid-template-columns: minmax
(max-content
,auto
)
55 minmax
(min-content
,max-content
)
56 minmax
(min-content
,auto
);
59 grid-template-columns: minmax
(min-content
,auto
)
60 minmax
(min-content
,max-content
)
61 minmax
(min-content
,auto
);
64 grid-template-columns: minmax
(1fr,auto
)
65 minmax
(min-content
,max-content
)
66 minmax
(min-content
,auto
);
69 grid-template-columns: minmax
(min-content
,auto
)
70 minmax
(min-content
,auto
)
71 minmax
(min-content
,auto
);
74 grid-template-columns: minmax
(auto
,min-content
)
75 minmax
(200px,min-content
)
76 minmax
(min-content
,min-content
);
79 grid-template-columns: minmax
(auto
,auto
)
84 grid-template-columns: minmax
(auto
,auto
)
85 minmax
(min-content
,min-content
)
86 minmax
(min-content
,min-content
);
89 grid-template-columns: minmax
(auto
,auto
)
90 minmax
(max-content
,min-content
)
91 minmax
(min-content
,min-content
);
94 grid-template-columns: minmax
(auto
,auto
)
95 minmax
(max-content
,min-content
)
96 minmax
(min-content
,max-content
);
99 grid-template-columns: minmax
(auto
,auto
)
100 minmax
(max-content
,max-content
)
101 minmax
(min-content
,max-content
);
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; }
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>