Skip to content

Commit e1b28d9

Browse files
stwrtstwrt
authored
1 parent af4ef29 commit e1b28d9

File tree

58 files changed

+4474
-989
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

58 files changed

+4474
-989
lines changed

‎css/css-grid/masonry/tentative/subgrid/column/masonry-subgrid-001a-ref.html‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
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>Reference: Masonry layout with a subgrid (masonry-subgrid-001a)</title>
9+
<link rel="author" title="Mats Palmgren" href="mailto:[email protected]">
10+
<style>
11+
html,body {
12+
color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
13+
}
14+
15+
grid {
16+
display: inline-grid;
17+
grid-template-rows: 50px 80px 40px;
18+
grid-template-columns: auto;
19+
gap: 4px 2px;
20+
padding: 1px 3px 5px 7px;
21+
border: solid;
22+
border-width: 3px 5px 1px 1px;
23+
background: lightgrey content-box;
24+
}
25+
masonry-track {
26+
display: grid;
27+
gap: 4px 2px;
28+
}
29+
masonry-track:nth-child(1) {
30+
grid-template-rows: 50px;
31+
grid-template-columns: min-content auto;
32+
}
33+
masonry-track:nth-child(2) {
34+
grid-auto-flow: column;
35+
grid-template-rows: 80px 40px;
36+
grid-template-columns: auto;
37+
}
38+
.rows {
39+
grid-template-columns: 50px 122px;
40+
grid-template-rows: auto;
41+
align-content: start;
42+
}
43+
.rows > masonry-track:nth-child(1) {
44+
grid-template-columns: 50px;
45+
grid-template-rows: auto;
46+
align-content: start;
47+
}
48+
.rows > masonry-track:nth-child(2) {
49+
grid-template-columns: 80px 40px;
50+
grid-template-rows: auto;
51+
align-content: start;
52+
}
53+
item {
54+
background: grey;
55+
width: 3ch;
56+
position: relative;
57+
}
58+
.purple { background:purple; width:auto; justify-self:start; }
59+
.rows .purple { justify-self:stretch; }
60+
.nth-1 {
61+
border: solid;
62+
border-width: 3px 13px 1px 1px;
63+
margin: 7px 1px 5px 3px;
64+
}
65+
subgrid {
66+
display: grid;
67+
grid: subgrid / 2ch auto;
68+
grid-row: 2 / span 2;
69+
grid-gap: 8px 20px;
70+
background: yellow;
71+
}
72+
masonry-track > subgrid {
73+
grid-row: 1 / span 2;
74+
}
75+
.rows > masonry-track > subgrid {
76+
grid: auto auto / subgrid;
77+
grid-row: 2;
78+
grid-column: 1 / span 2;
79+
}
80+
.js { justify-self:stretch; }
81+
</style>
82+
</head>
83+
<body>
84+
85+
<!-- just to sanity check that `masonry` behaves as `none` in the column axis in this case: -->
86+
87+
<grid style="grid:masonry/none">
88+
<item class="nth-1">1</item>
89+
<item class="purple js">2</item>
90+
<item>3</item>
91+
<subgrid style="grid:masonry/none">
92+
<item class="nth-1">4a</item>
93+
<item style="margin-right:15px" class="purple js">4b</item>
94+
</subgrid>
95+
</grid>
96+
97+
</body></html>

‎css/css-grid/masonry/tentative/subgrid/column/masonry-subgrid-001a.html‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
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: Masonry layout with a subgrid (masonry-subgrid-001a)</title>
9+
<link rel="author" title="Mats Palmgren" href="mailto:[email protected]">
10+
<link rel="help" href="https://drafts.csswg.org/css-grid-3/#subgrids">
11+
<link rel="match" href="masonry-subgrid-001a-ref.html">
12+
<style>
13+
html,body {
14+
color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
15+
}
16+
17+
grid {
18+
display: inline-grid-lanes;
19+
masonry-direction: row;
20+
grid-template-rows: 50px 80px 40px;
21+
gap: 4px 2px;
22+
padding: 1px 3px 5px 7px;
23+
border: solid;
24+
border-width: 3px 5px 1px 1px;
25+
background: lightgrey content-box;
26+
}
27+
.rows {
28+
grid-template-columns: 50px 80px 40px;
29+
}
30+
item {
31+
background: grey;
32+
width: 3ch;
33+
position: relative;
34+
}
35+
item:nth-child(2n) { background:purple; width:auto; }
36+
item:nth-child(1) {
37+
border: solid;
38+
border-width: 3px 13px 1px 1px;
39+
margin: 7px 1px 5px 3px;
40+
}
41+
subgrid {
42+
display: grid;
43+
grid: subgrid / subgrid;
44+
grid-row: 2 / span 2;
45+
grid-gap: 8px 20px;
46+
background: yellow;
47+
}
48+
.rows > subgrid {
49+
grid-row: initial;
50+
grid-column: 2 / span 2;
51+
}
52+
</style>
53+
</head>
54+
<body>
55+
56+
57+
<grid>
58+
<item>1</item>
59+
<item>2</item>
60+
<item>3</item>
61+
<subgrid>
62+
<item>4a</item>
63+
<item style="margin-right:15px">4b</item>
64+
</subgrid>
65+
</grid>
66+
67+
</body></html>

‎css/css-grid/masonry/tentative/subgrid/column/masonry-subgrid-001b-ref.html‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
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>Reference: Masonry layout with a subgrid (masonry-subgrid-001b)</title>
9+
<link rel="author" title="Mats Palmgren" href="mailto:[email protected]">
10+
<style>
11+
html,body {
12+
color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
13+
}
14+
15+
grid {
16+
display: inline-grid;
17+
grid-template-rows: 50px 80px 40px;
18+
grid-template-columns: auto;
19+
gap: 4px 2px;
20+
padding: 1px 3px 5px 7px;
21+
border: solid;
22+
border-width: 3px 5px 1px 1px;
23+
background: lightgrey content-box;
24+
}
25+
masonry-track {
26+
display: grid;
27+
gap: 4px 2px;
28+
}
29+
masonry-track:nth-child(1) {
30+
grid-template-rows: 50px;
31+
grid-template-columns: min-content auto;
32+
}
33+
masonry-track:nth-child(2) {
34+
grid-auto-flow: column;
35+
grid-template-rows: 80px 40px;
36+
grid-template-columns: auto;
37+
}
38+
.rows {
39+
grid-template-columns: 50px 122px;
40+
grid-template-rows: auto;
41+
align-content: start;
42+
}
43+
.rows > masonry-track:nth-child(1) {
44+
grid-template-columns: 50px;
45+
grid-template-rows: auto;
46+
align-content: start;
47+
}
48+
.rows > masonry-track:nth-child(2) {
49+
grid-template-columns: 80px 40px;
50+
grid-template-rows: auto;
51+
align-content: start;
52+
}
53+
item {
54+
background: grey;
55+
width: 3ch;
56+
position: relative;
57+
}
58+
.purple { background:purple; width:auto; justify-self:start; }
59+
.rows .purple { justify-self:stretch; }
60+
.nth-1 {
61+
border: solid;
62+
border-width: 3px 13px 1px 1px;
63+
margin: 7px 1px 5px 3px;
64+
}
65+
subgrid {
66+
display: grid;
67+
grid: subgrid / 2ch auto;
68+
grid-row: 2 / span 2;
69+
grid-gap: 8px 20px;
70+
background: yellow;
71+
}
72+
masonry-track > subgrid {
73+
grid-row: 1 / span 2;
74+
}
75+
.rows > masonry-track > subgrid {
76+
grid: auto auto / subgrid;
77+
grid-row: 2;
78+
grid-column: 1 / span 2;
79+
}
80+
.js { justify-self:stretch; }
81+
</style>
82+
</head>
83+
<body>
84+
85+
<!-- just to sanity check that `masonry` behaves as `none` in the column axis in this case: -->
86+
87+
<grid>
88+
<masonry-track>
89+
<item class="nth-1">1</item>
90+
<item>5</item>
91+
</masonry-track>
92+
<masonry-track>
93+
<item class="purple">2</item>
94+
<item>3</item>
95+
<subgrid>
96+
<item class="nth-1" style="grid-column:span 2">4a</item>
97+
<item class="purple js">4b</item>
98+
<item>4c</item>
99+
</subgrid>
100+
</masonry-track>
101+
</grid>
102+
103+
</body></html>

‎css/css-grid/masonry/tentative/subgrid/column/masonry-subgrid-001b.html‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
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: Masonry layout with a subgrid (masonry-subgrid-001b)</title>
9+
<link rel="author" title="Mats Palmgren" href="mailto:[email protected]">
10+
<link rel="help" href="https://drafts.csswg.org/css-grid-3/#subgrids">
11+
<link rel="match" href="masonry-subgrid-001b-ref.html">
12+
<style>
13+
html,body {
14+
color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
15+
}
16+
17+
grid {
18+
display: inline-grid-lanes;
19+
masonry-direction: row;
20+
grid-template-rows: 50px 80px 40px;
21+
gap: 4px 2px;
22+
padding: 1px 3px 5px 7px;
23+
border: solid;
24+
border-width: 3px 5px 1px 1px;
25+
background: lightgrey content-box;
26+
}
27+
.rows {
28+
grid-template-columns: 50px 80px 40px;
29+
}
30+
item {
31+
background: grey;
32+
width: 3ch;
33+
position: relative;
34+
}
35+
item:nth-child(2n) { background:purple; width:auto; }
36+
item:nth-child(1) {
37+
border: solid;
38+
border-width: 3px 13px 1px 1px;
39+
margin: 7px 1px 5px 3px;
40+
}
41+
subgrid {
42+
display: grid;
43+
grid: subgrid / subgrid;
44+
grid-row: 2 / span 2;
45+
grid-gap: 8px 20px;
46+
background: yellow;
47+
}
48+
.rows > subgrid {
49+
grid-row: initial;
50+
grid-column: 2 / span 2;
51+
}
52+
</style>
53+
</head>
54+
<body>
55+
56+
57+
<grid>
58+
<item>1</item>
59+
<item>2</item>
60+
<item>3</item>
61+
<subgrid>
62+
<item>4a</item>
63+
<item>4b</item>
64+
<item>4c</item>
65+
</subgrid>
66+
<item>5</item>
67+
</grid>
68+
69+
</body></html>

0 commit comments

Comments
 (0)