3 Any copyright is dedicated to the Public Domain.
4 http://creativecommons.org/publicdomain/zero/1.0/
8 <title>CSS Grid Test: fit-content() track sizing
</title>
9 <link rel=
"author" title=
"Mats Palmgren" href=
"https://bugzilla.mozilla.org/show_bug.cgi?id=1281320">
10 <link rel=
"help" href=
"https://drafts.csswg.org/css-grid/#valdef-grid-template-columns-fit-content">
11 <link rel=
"match" href=
"grid-track-fit-content-sizing-001-ref.html">
12 <style type=
"text/css">
13 body
,html
{ color:black
; background:white
; font-size:1px; padding:0; margin:0; }
17 grid-template-rows: auto auto
;
22 .c1 { grid-template-columns: fit-content
(40%) minmax
(100px, 1fr); }
23 .c2 { grid: auto
10px / fit-content
(40%) 0 minmax
(100px, 1fr); }
24 .c3 { grid: auto
10px / fit-content
(40%) fit-content
(40%) minmax
(0px, 1fr); }
25 .c4 { grid: auto
10px / fit-content
(40%) 100px minmax
(100px, 1fr); }
26 .c5 { grid: auto
10px / fit-content
(40%) minmax
(0, 1fr) minmax
(100px, 1fr); }
27 .c6 { grid: auto
10px / fit-content
(calc
(1px - 99%)) minmax
(0, 1fr) minmax
(100px, 1fr); }
28 .c7 { grid: auto
10px / none
; grid-auto-columns: fit-content
(40%); }
30 span
{ line-height:0; grid-column:span
2; background: lime
; }
31 .c1 span { grid-column:span
1; }
34 display: inline-block
;
41 left:0; right:0; top:0; bottom:0;
50 <div class=
"grid c1"><span><a></a><a></a><a></a><a></a></span><y></y></div>
51 <div class=
"grid c2"><span><a></a><a></a><a></a><a></a></span><y></y></div>
52 <div class=
"grid c3"><span><a></a><a></a><a></a><a></a></span><y></y></div>
53 <div class=
"grid c4"><span><a></a><a></a><a></a><a></a></span><y></y></div>
54 <div class=
"grid c5"><span><a></a><a></a><a></a><a></a></span><y></y></div>
55 <div class=
"grid c6"><span><a></a><a></a><a></a><a></a></span><y></y></div>
57 <div style=
"width:502px">
58 <div class=
"grid c1"><span><a></a><a></a><a></a><a></a></span><y></y></div>
59 <div class=
"grid c2"><span><a></a><a></a><a></a><a></a></span><y></y></div>
60 <div class=
"grid c3"><span><a></a><a></a><a></a><a></a></span><y></y></div>
61 <div class=
"grid c4"><span><a></a><a></a><a></a><a></a></span><y></y></div>
62 <div class=
"grid c5"><span><a></a><a></a><a></a><a></a></span><y></y></div>
63 <div class=
"grid c6"><span><a></a><a></a><a></a><a></a></span><y></y></div>
66 <div style=
"width:442px">
67 <div class=
"grid c1"><span><a></a><a></a><a></a><a></a></span><y></y></div>
68 <div class=
"grid c2"><span><a></a><a></a><a></a><a></a></span><y></y></div>
69 <div class=
"grid c3"><span><a></a><a></a><a></a><a></a></span><y></y></div>
70 <div class=
"grid c4"><span><a></a><a></a><a></a><a></a></span><y></y></div>
71 <div class=
"grid c5"><span><a></a><a></a><a></a><a></a></span><y></y></div>
74 <div style=
"width:382px">
75 <div class=
"grid c1"><span><a></a><a></a><a></a><a></a></span><y></y></div>
76 <div class=
"grid c2"><span><a></a><a></a><a></a><a></a></span><y></y></div>
77 <div class=
"grid c3"><span><a></a><a></a><a></a><a></a></span><y></y></div>
78 <div class=
"grid c4"><span><a></a><a></a><a></a><a></a></span><y></y></div>
79 <div class=
"grid c5"><span><a></a><a></a><a></a><a></a></span><y></y></div>
82 <div style=
"width:322px">
83 <div class=
"grid c1"><span><a></a><a></a><a></a><a></a></span><y></y></div>
84 <div class=
"grid c2"><span><a></a><a></a><a></a><a></a></span><y></y></div>
85 <div class=
"grid c3"><span><a></a><a></a><a></a><a></a></span><y></y></div>
86 <div class=
"grid c4"><span><a></a><a></a><a></a><a></a></span><y></y></div>
87 <div class=
"grid c5"><span><a></a><a></a><a></a><a></a></span><y></y></div>
90 <div style=
"width:262px">
91 <div class=
"grid c1"><span><a></a><a></a><a></a><a></a></span><y></y></div>
92 <div class=
"grid c2"><span><a></a><a></a><a></a><a></a></span><y></y></div>
93 <div class=
"grid c3"><span><a></a><a></a><a></a><a></a></span><y></y></div>
94 <div class=
"grid c4"><span><a></a><a></a><a></a><a></a></span><y></y></div>
95 <div class=
"grid c5"><span><a></a><a></a><a></a><a></a></span><y></y></div>
98 <div style=
"width:202px">
99 <div class=
"grid c1"><span><a></a><a></a><a></a><a></a></span><y></y></div>
100 <div class=
"grid c2"><span><a></a><a></a><a></a><a></a></span><y></y></div>
101 <div class=
"grid c3"><span><a></a><a></a><a></a><a></a></span><y></y></div>
102 <div class=
"grid c4"><span><a></a><a></a><a></a><a></a></span><y></y></div>
103 <div class=
"grid c5"><span><a></a><a></a><a></a><a></a></span><y></y></div>
104 <div class=
"grid c7"><span><a></a><a></a><a></a><a></a></span><y></y></div>
107 <div style=
"width:142px">
108 <div class=
"grid c1"><span><a></a><a></a><a></a><a></a></span><y></y></div>
109 <div class=
"grid c2"><span><a></a><a></a><a></a><a></a></span><y></y></div>
110 <div class=
"grid c3"><span><a></a><a></a><a></a><a></a></span><y></y></div>
111 <div class=
"grid c4"><span><a></a><a></a><a></a><a></a></span><y></y></div>
112 <div class=
"grid c5"><span><a></a><a></a><a></a><a></a></span><y></y></div>
115 <div style=
"width:82px">
116 <div class=
"grid c1"><span><a></a><a></a><a></a><a></a></span><y></y></div>
117 <div class=
"grid c2"><span><a></a><a></a><a></a><a></a></span><y></y></div>
118 <div class=
"grid c3"><span><a></a><a></a><a></a><a></a></span><y></y></div>
119 <div class=
"grid c4"><span><a></a><a></a><a></a><a></a></span><y></y></div>
120 <div class=
"grid c5"><span><a></a><a></a><a></a><a></a></span><y></y></div>
123 <div style=
"width:22px">
124 <div class=
"grid c1"><span><a></a><a></a><a></a><a></a></span><y></y></div>
125 <div class=
"grid c2"><span><a></a><a></a><a></a><a></a></span><y></y></div>
126 <div class=
"grid c3"><span><a></a><a></a><a></a><a></a></span><y></y></div>
127 <div class=
"grid c4"><span><a></a><a></a><a></a><a></a></span><y></y></div>
128 <div class=
"grid c5"><span><a></a><a></a><a></a><a></a></span><y></y></div>
129 <div class=
"grid c6"><span><a></a><a></a><a></a><a></a></span><y></y></div>
132 <div style=
"width:2px">
133 <div class=
"grid c1"><span><a></a><a></a><a></a><a></a></span><y></y></div>
134 <div class=
"grid c2"><span><a></a><a></a><a></a><a></a></span><y></y></div>
135 <div class=
"grid c3"><span><a></a><a></a><a></a><a></a></span><y></y></div>
136 <div class=
"grid c4"><span><a></a><a></a><a></a><a></a></span><y></y></div>
137 <div class=
"grid c5"><span><a></a><a></a><a></a><a></a></span><y></y></div>