3 Any copyright is dedicated to the Public Domain.
4 http://creativecommons.org/publicdomain/zero/1.0/
8 <title>CSS Grid Test: 'grid-column-gap'
</title>
9 <link rel=
"author" title=
"Mats Palmgren" href=
"https://bugzilla.mozilla.org/show_bug.cgi?id=1176792">
10 <link rel=
"help" href=
"http://dev.w3.org/csswg/css-grid/#gutters">
11 <link rel=
"match" href=
"grid-column-gap-003-ref.html">
12 <style type=
"text/css">
13 body
,html
{ color:black
; background:white
; font-size:16px; padding:0; margin:0; }
15 body
{ width: 800px; }
18 grid-auto-columns: minmax
(0,1fr);
23 .c1 { grid-column: 1 / span
2; min-width:40px; }
24 .r1 { grid-column: 2 / span
3; min-width:70px; }
25 .c3 { grid-column: 3 / span
1; min-width:0; }
30 border-width: 1px 3px 5px 7px;
33 justify-self: stretch
;
36 x
{ display:inline-block
; width:10px; height:18px; }
42 <span class=
"c1"><x></x></span>
43 <span class=
"r1"><x></x></span>
47 <span class=
"c1"><x></x></span>
48 <span class=
"r1"><x></x></span>
49 <span class=
"c3"><x></x></span>
53 <span class=
"c1"><x></x></span>
54 <span class=
"r1"><x></x></span>
55 <span class=
"r1"><x></x></span>
56 <span class=
"r1"><x></x></span>
58 <div class=
"grid" style=
"grid-template-columns: minmax(0,1fr) 400px;">
59 <span class=
"c1"><x></x></span>
60 <span class=
"r1"><x></x></span>
61 <span class=
"c3"><x></x></span>
64 <div class=
"grid" style=
"width:500px;">
65 <span class=
"c1" style=
"min-width:20px"><x></x></span>
66 <span class=
"r1" style=
"min-width:10px"><x></x></span>
67 <span class=
"r1" style=
"min-width:30px"><x></x></span>
68 <span class=
"r1" style=
"min-width:10px"><x></x></span>
71 <div class=
"grid" style=
"grid-template-columns: minmax(0,1fr) minmax(0,500px);">
72 <span class=
"c1"><x></x></span>
73 <span class=
"r1"><x></x></span>
74 <span class=
"c3"><x></x></span>
78 <span class=
"c1" style=
"width:100px"><x></x></span>
79 <span class=
"r1" style=
"width:300px"><x></x></span>
80 <span class=
"c3"><x></x></span>
84 <span class=
"c1" style=
"width:100px; border-sizing:border-box"><x></x></span>
85 <span class=
"r1" style=
"width:300px; border-sizing:border-box"><x></x></span>
86 <span class=
"c3"><x></x></span>