Skip to content

Commit 3b757bc

Browse files
sammygillsammygill
authored
[css-grid] Use masonry-auto-flow when performing masonry layout https://commits.webkit.org/257643@main
1 parent 9f571c7 commit 3b757bc

4 files changed

+189
-0
lines changed

‎css/css-grid/masonry/tentative/item-placement/masonry-columns-item-placement-auto-flow-next-001-ref.html

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
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 masonry columns masonry-auto-flow next</title>
9+
<link rel="author" title="Sammy Gill" href="mailto:[email protected]">
10+
<link rel="help" href="https://drafts.csswg.org/css-grid-3/#masonry-auto-flow">
11+
<meta name="assert" content="Placing item that would span outside the grid using masonry-auto-flow-next should place the item at the first grid axis track" />
12+
<style>
13+
html,body {
14+
color:black; background-color:white; font:25px/1 monospace; padding:0; margin:0;
15+
}
16+
17+
grid {
18+
display: inline-grid;
19+
gap: 10px 20px;
20+
grid-template-rows: repeat(4,80px);
21+
grid-template-columns: auto;
22+
grid-auto-flow: column;
23+
color: #444;
24+
border: 1px solid;
25+
padding: 2px;
26+
}
27+
28+
item {
29+
background-color: #444;
30+
color: #fff;
31+
padding: 20px;
32+
margin: 3px;
33+
border: 5px solid blue;
34+
}
35+
</style>
36+
</head>
37+
<body>
38+
39+
<grid>
40+
<item>1</item>
41+
<item style="grid-row: span 3">2</item>
42+
<item>3</item>
43+
<item style="grid-row: span 4">4</item>
44+
</grid>
45+
46+
</body>
47+
</html>

‎css/css-grid/masonry/tentative/item-placement/masonry-columns-item-placement-auto-flow-next-001.html

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
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 masonry columns masonry-auto-flow next</title>
9+
<link rel="author" title="Sammy Gill" href="mailto:[email protected]">
10+
<link rel="help" href="https://drafts.csswg.org/css-grid-3/#masonry-auto-flow">
11+
<link rel="match" href="masonry-columns-item-placement-auto-flow-next-001-ref.html">
12+
<meta name="assert" content="Placing item that would span outside the grid using masonry-auto-flow-next should place the item at the first grid axis track" />
13+
<style>
14+
html,body {
15+
color:black; background-color:white; font:25px/1 monospace; padding:0; margin:0;
16+
}
17+
18+
grid {
19+
display: inline-grid;
20+
gap: 10px 20px;
21+
grid-template-rows: repeat(4,80px);
22+
grid-template-columns: masonry;
23+
color: #444;
24+
border: 1px solid;
25+
padding: 2px;
26+
masonry-auto-flow: next;
27+
}
28+
29+
item {
30+
background-color: #444;
31+
color: #fff;
32+
padding: 20px;
33+
margin: 3px;
34+
border: 5px solid blue;
35+
}
36+
</style>
37+
</head>
38+
<body>
39+
40+
<grid>
41+
<item>1</item>
42+
<item style="grid-row: span 3">2</item>
43+
<item>3</item>
44+
<item style="grid-row: span 4">4</item>
45+
</grid>
46+
47+
</body>
48+
</html>

‎css/css-grid/masonry/tentative/item-placement/masonry-rows-item-placement-auto-flow-next-001-ref.html

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
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 masonry rows masonry-auto-flow next</title>
9+
<link rel="author" title="Sammy Gill" href="mailto:[email protected]">
10+
<link rel="help" href="https://drafts.csswg.org/css-grid-3/#masonry-auto-flow">
11+
<meta name="assert" content="Placing item that would span outside the grid using masonry-auto-flow-next should place the item at the first grid axis track" />
12+
<style>
13+
html,body {
14+
color:black; background-color:white; font:25px/1 monospace; padding:0; margin:0;
15+
}
16+
17+
grid {
18+
display: inline-grid;
19+
gap: 10px 20px;
20+
grid-template-columns: repeat(4,80px);
21+
grid-template-rows: auto;
22+
color: #444;
23+
border: 1px solid;
24+
padding: 2px;
25+
}
26+
27+
item {
28+
background-color: #444;
29+
color: #fff;
30+
padding: 20px;
31+
margin: 3px;
32+
border: 5px solid blue;
33+
}
34+
</style>
35+
</head>
36+
<body>
37+
38+
<grid>
39+
<item>1</item>
40+
<item style="grid-column: span 3">2</item>
41+
<item>3</item>
42+
<item style="grid-column: span 4">4</item>
43+
</grid>
44+
45+
</body>
46+
</html>

‎css/css-grid/masonry/tentative/item-placement/masonry-rows-item-placement-auto-flow-next-001.html

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
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 masonry rows masonry-auto-flow next</title>
9+
<link rel="author" title="Sammy Gill" href="mailto:[email protected]">
10+
<link rel="help" href="https://drafts.csswg.org/css-grid-3/#masonry-auto-flow">
11+
<link rel="match" href="masonry-rows-item-placement-auto-flow-next-001-ref.html">
12+
<meta name="assert" content="Placing item that would span outside the grid using masonry-auto-flow-next should place the item at the first grid axis track" />
13+
<style>
14+
html,body {
15+
color:black; background-color:white; font:25px/1 monospace; padding:0; margin:0;
16+
}
17+
18+
grid {
19+
display: inline-grid;
20+
gap: 10px 20px;
21+
grid-template-columns: repeat(4,80px);
22+
grid-template-rows: masonry;
23+
color: #444;
24+
border: 1px solid;
25+
padding: 2px;
26+
masonry-auto-flow: next;
27+
}
28+
29+
item {
30+
background-color: #444;
31+
color: #fff;
32+
padding: 20px;
33+
margin: 3px;
34+
border: 5px solid blue;
35+
}
36+
</style>
37+
</head>
38+
<body>
39+
40+
<grid>
41+
<item>1</item>
42+
<item style="grid-column: span 3">2</item>
43+
<item>3</item>
44+
<item style="grid-column: span 4">4</item>
45+
</grid>
46+
47+
</body>
48+
</html>

0 commit comments

Comments
 (0)