3 Any copyright is dedicated to the Public Domain.
4 http://creativecommons.org/publicdomain/zero/1.0/
8 <title>CSS Grid Test: 'grid-row-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-row-gap-001-ref.html">
12 <style type=
"text/css">
14 color:black
; background-color:white
; font-size:16px; padding:0; margin:0;
16 separator
{ clear:both
; display:block
; height:6px; }
23 border-block-start: 2px solid blue
;
24 grid-template: 3px 5px 7px / 11px 7px 5px;
25 padding: 1px 1px 3px 2px;
35 justify-self: stretch
;
39 item1
{ grid-area: 1 / 1; }
40 item2
{ grid-area: 2 / 2; }
41 item3
{ grid-area: 3 / 3; }
43 .hl { writing-mode: horizontal-tb
; direction:ltr
; }
44 .hr { writing-mode: horizontal-tb
; direction:rtl
; }
45 .vl { writing-mode: vertical-lr
; }
46 .vr { writing-mode: vertical-rl
; }
47 .vlr { writing-mode: vertical-lr
; direction:rtl
; }
48 .vrl { writing-mode: vertical-rl
; direction:ltr
; }
50 .astart { align-content:start
; }
51 .aend { align-content:end
; }
52 .aflexstart { align-content:flex-start
; }
53 .aflexend { align-content:flex-end
; }
54 .acenter { align-content:center
; }
55 .aleft { align-content:left
; }
56 .aright { align-content:right
; }
58 .aspace-between{ align-content:space-between
; }
59 .aspace-around { align-content:space-around
; }
60 .aspace-evenly { align-content:space-evenly
; }
62 .astretch1, .astretch2, .astretch3, .astretch4 { align-content:stretch
; }
63 .astretch2 { grid-template-rows: minmax
(3px,auto
) 5px 7px; }
64 .astretch3 { grid-template-rows: minmax
(3px,auto
) minmax
(5px,auto
) 7px; }
65 .astretch4 { grid-template-rows: minmax
(3px,auto
) minmax
(5px,auto
) minmax
(7px,auto
); }
72 var gridwm
= [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
73 var test
= [ "start", "end", "flexstart", "flexend", "center", "left", "right",
74 "space-between", "space-around", "space-evenly",
75 "stretch1", "stretch2", "stretch3", "stretch4" ];
76 for (var k
= 0; k
< test
.length
; ++k
) {
77 for (var i
= 0; i
< gridwm
.length
; ++i
) {
78 var div
= document
.createElement("div");
79 div
.className
= "grid a" + test
[k
] + " " + gridwm
[i
];
80 div
.appendChild(document
.createElement("item1"));
81 div
.appendChild(document
.createElement("item2"));
82 div
.appendChild(document
.createElement("item3"));
83 document
.body
.appendChild(div
)
85 document
.body
.appendChild(document
.createElement("separator"));