зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1607954 part 3 - [css-grid][css-align] Add tentative tests and update devtools support files for Masonry layout. r=dholbert
Differential Revision: https://phabricator.services.mozilla.com/D67063
This commit is contained in:
Mats Palmgren
Родитель
3622105887
Коммит
32769d9cf6
|
|
@ -12,6 +12,7 @@ exports.ANIMATION_TYPE_FOR_LONGHANDS = [
|
|||
"align-content",
|
||||
"align-items",
|
||||
"align-self",
|
||||
"align-tracks",
|
||||
"-moz-appearance",
|
||||
"backface-visibility",
|
||||
"background-attachment",
|
||||
|
|
@ -89,6 +90,7 @@ exports.ANIMATION_TYPE_FOR_LONGHANDS = [
|
|||
"justify-content",
|
||||
"justify-items",
|
||||
"justify-self",
|
||||
"justify-tracks",
|
||||
"line-break",
|
||||
"list-style-image",
|
||||
"list-style-position",
|
||||
|
|
@ -104,6 +106,7 @@ exports.ANIMATION_TYPE_FOR_LONGHANDS = [
|
|||
"mask-origin",
|
||||
"mask-repeat",
|
||||
"mask-type",
|
||||
"masonry-auto-flow",
|
||||
"mix-blend-mode",
|
||||
"object-fit",
|
||||
"-moz-orient",
|
||||
|
|
|
|||
|
|
@ -3070,7 +3070,9 @@ exports.CSS_PROPERTIES = {
|
|||
"flex-direction",
|
||||
"flex-wrap",
|
||||
"justify-content",
|
||||
"justify-tracks",
|
||||
"align-content",
|
||||
"align-tracks",
|
||||
"align-items",
|
||||
"justify-items",
|
||||
"flex-grow",
|
||||
|
|
@ -3096,6 +3098,7 @@ exports.CSS_PROPERTIES = {
|
|||
"grid-column-end",
|
||||
"grid-auto-columns",
|
||||
"grid-template-columns",
|
||||
"masonry-auto-flow",
|
||||
"grid-auto-flow",
|
||||
"grid-template-areas",
|
||||
"column-gap",
|
||||
|
|
@ -6535,6 +6538,7 @@ exports.CSS_PROPERTIES = {
|
|||
"fit-content",
|
||||
"inherit",
|
||||
"initial",
|
||||
"masonry",
|
||||
"max-content",
|
||||
"min-content",
|
||||
"minmax",
|
||||
|
|
@ -6749,6 +6753,7 @@ exports.CSS_PROPERTIES = {
|
|||
"fit-content",
|
||||
"inherit",
|
||||
"initial",
|
||||
"masonry",
|
||||
"max-content",
|
||||
"min-content",
|
||||
"minmax",
|
||||
|
|
@ -6783,6 +6788,7 @@ exports.CSS_PROPERTIES = {
|
|||
"fit-content",
|
||||
"inherit",
|
||||
"initial",
|
||||
"masonry",
|
||||
"max-content",
|
||||
"min-content",
|
||||
"minmax",
|
||||
|
|
@ -6803,6 +6809,7 @@ exports.CSS_PROPERTIES = {
|
|||
"fit-content",
|
||||
"inherit",
|
||||
"initial",
|
||||
"masonry",
|
||||
"max-content",
|
||||
"min-content",
|
||||
"minmax",
|
||||
|
|
@ -10701,6 +10708,10 @@ exports.PREFERENCES = [
|
|||
"initial-letter",
|
||||
"layout.css.initial-letter.enabled"
|
||||
],
|
||||
[
|
||||
"masonry-auto-flow",
|
||||
"layout.css.grid-template-masonry-value.enabled"
|
||||
],
|
||||
[
|
||||
"-moz-osx-font-smoothing",
|
||||
"layout.css.osx-font-smoothing.enabled"
|
||||
|
|
@ -10773,6 +10784,10 @@ exports.PREFERENCES = [
|
|||
"overscroll-behavior-y",
|
||||
"layout.css.overscroll-behavior.enabled"
|
||||
],
|
||||
[
|
||||
"align-tracks",
|
||||
"layout.css.grid-template-masonry-value.enabled"
|
||||
],
|
||||
[
|
||||
"backdrop-filter",
|
||||
"layout.css.backdrop-filter.enabled"
|
||||
|
|
@ -10781,6 +10796,10 @@ exports.PREFERENCES = [
|
|||
"font-variation-settings",
|
||||
"layout.css.font-variations.enabled"
|
||||
],
|
||||
[
|
||||
"justify-tracks",
|
||||
"layout.css.grid-template-masonry-value.enabled"
|
||||
],
|
||||
[
|
||||
"offset-anchor",
|
||||
"layout.css.motion-path.enabled"
|
||||
|
|
|
|||
|
|
@ -11818,6 +11818,29 @@ var isGridTemplateSubgridValueEnabled = IsCSSPropertyPrefEnabled(
|
|||
"layout.css.grid-template-subgrid-value.enabled"
|
||||
);
|
||||
|
||||
var isGridTemplateMasonryValueEnabled = IsCSSPropertyPrefEnabled(
|
||||
"layout.css.grid-template-masonry-value.enabled"
|
||||
);
|
||||
|
||||
if (isGridTemplateMasonryValueEnabled) {
|
||||
gCSSProperties["masonry-auto-flow"] = {
|
||||
domProp: "masonryAutoFlow",
|
||||
inherited: false,
|
||||
type: CSS_TYPE_LONGHAND,
|
||||
initial_values: ["pack"],
|
||||
other_values: ["pack ordered", "ordered next", "next definite-first"],
|
||||
invalid_values: ["auto", "none", "10px", "row", "dense"],
|
||||
};
|
||||
|
||||
let alignTracks = { ...gCSSProperties["align-content"] };
|
||||
alignTracks.domProp = "alignTracks";
|
||||
gCSSProperties["align-tracks"] = alignTracks;
|
||||
|
||||
let justifyTracks = { ...gCSSProperties["justify-content"] };
|
||||
justifyTracks.domProp = "justifyTracks";
|
||||
gCSSProperties["justify-tracks"] = justifyTracks;
|
||||
}
|
||||
|
||||
gCSSProperties["display"].other_values.push("grid", "inline-grid");
|
||||
gCSSProperties["grid-auto-flow"] = {
|
||||
domProp: "gridAutoFlow",
|
||||
|
|
@ -12055,6 +12078,20 @@ if (isGridTemplateSubgridValueEnabled) {
|
|||
"subgrid repeat(auto-fill, []) repeat(auto-fill, [])"
|
||||
);
|
||||
}
|
||||
if (isGridTemplateMasonryValueEnabled) {
|
||||
gCSSProperties["grid-template-columns"].other_values.push("masonry");
|
||||
gCSSProperties["grid-template-columns"].invalid_values.push(
|
||||
"masonry []",
|
||||
"masonry [foo] 40px",
|
||||
"masonry 40px",
|
||||
"[foo] masonry",
|
||||
"0px masonry",
|
||||
"masonry masonry",
|
||||
"subgrid masonry",
|
||||
"masonry subgrid",
|
||||
"masonry repeat(1, [])"
|
||||
);
|
||||
}
|
||||
gCSSProperties["grid-template-rows"] = {
|
||||
domProp: "gridTemplateRows",
|
||||
inherited: false,
|
||||
|
|
@ -12142,6 +12179,22 @@ if (isGridTemplateSubgridValueEnabled) {
|
|||
"subgrid / 'fizz'"
|
||||
);
|
||||
}
|
||||
if (isGridTemplateMasonryValueEnabled) {
|
||||
gCSSProperties["grid-template"].other_values.push(
|
||||
"masonry / subgrid",
|
||||
"subgrid / masonry",
|
||||
"masonry / masonry" /* valid but behaves as 'masonry / none' */,
|
||||
"masonry/40px 20px",
|
||||
"subgrid [foo] [] [bar baz] / masonry",
|
||||
"40px 20px/masonry",
|
||||
"masonry/subgrid [foo] [] repeat(3, [a] [b]) [bar baz]",
|
||||
"subgrid [foo] [] [bar baz]/masonry"
|
||||
);
|
||||
gCSSProperties["grid-template"].invalid_values.push(
|
||||
"masonry",
|
||||
"masonry / 'fizz'"
|
||||
);
|
||||
}
|
||||
|
||||
gCSSProperties["grid"] = {
|
||||
domProp: "grid",
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
prefs: [layout.css.grid-template-masonry-value.enabled:true]
|
||||
|
|
@ -0,0 +1,125 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>Reference: Masonry layout with `align-content` in masonry axis</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
|
||||
grid {
|
||||
display: inline-grid;
|
||||
gap: 1px 2px;
|
||||
grid-template-columns: repeat(4,20px);
|
||||
grid-template-rows: 1em auto;
|
||||
color: #444;
|
||||
border: 1px solid;
|
||||
padding: 2px;
|
||||
height: 100px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
item {
|
||||
background-color: #444;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.tall { padding-top:30px; grid-row:span 2; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<grid style="align-content:start">
|
||||
<item style="grid-column:1/2" class="tall">1</item>
|
||||
<item style="grid-column:2/3">2</item>
|
||||
<item style="grid-column:3/4">3</item>
|
||||
<item style="grid-column:4/5">4</item>
|
||||
<item style="grid-column:2/3">5</item>
|
||||
<item style="grid-column:3/4">6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="align-content:start">
|
||||
<item style="grid-column:1/2">1</item>
|
||||
<item style="grid-column:2/3" class="tall">2</item>
|
||||
<item style="grid-column:3/4">3</item>
|
||||
<item style="grid-column:4/5">4</item>
|
||||
<item style="grid-column:1/2">5</item>
|
||||
<item style="grid-column:3/4">6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="align-content:end">
|
||||
<item style="grid-column:1/2" class="tall">1</item>
|
||||
<item style="grid-column:2/3">2</item>
|
||||
<item style="grid-column:3/4">3</item>
|
||||
<item style="grid-column:4/5">4</item>
|
||||
<item style="grid-column:2/3">5</item>
|
||||
<item style="grid-column:3/4">6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="align-content:end">
|
||||
<item style="grid-column:1/2">1</item>
|
||||
<item style="grid-column:2/3" class="tall">2</item>
|
||||
<item style="grid-column:3/4">3</item>
|
||||
<item style="grid-column:4/5">4</item>
|
||||
<item style="grid-column:1/2">5</item>
|
||||
<item style="grid-column:3/4">6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="align-content:center">
|
||||
<item style="grid-column:1/2" class="tall">1</item>
|
||||
<item style="grid-column:2/3">2</item>
|
||||
<item style="grid-column:3/4">3</item>
|
||||
<item style="grid-column:4/5">4</item>
|
||||
<item style="grid-column:2/3">5</item>
|
||||
<item style="grid-column:3/4">6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="align-content:center">
|
||||
<item style="grid-column:1/2">1</item>
|
||||
<item style="grid-column:2/3" class="tall">2</item>
|
||||
<item style="grid-column:3/4">3</item>
|
||||
<item style="grid-column:4/5">4</item>
|
||||
<item style="grid-column:1/2">5</item>
|
||||
<item style="grid-column:3/4">6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="align-content:stretch">
|
||||
<item style="grid-column:1/2" class="tall">1</item>
|
||||
<item style="grid-column:2/3">2</item>
|
||||
<item style="grid-column:3/4">3</item>
|
||||
<item style="grid-column:4/5">4</item>
|
||||
<item style="grid-column:2/3">5</item>
|
||||
<item style="grid-column:3/4">6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="align-content:start">
|
||||
<item style="grid-column:1/2" class="tall">1</item>
|
||||
<item style="grid-column:2/3">2</item>
|
||||
<item style="grid-column:3/4">3</item>
|
||||
<item style="grid-column:4/5">4</item>
|
||||
<item style="grid-column:2/3">5</item>
|
||||
<item style="grid-column:3/4">6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="align-content:center">
|
||||
<item style="grid-column:1/2" class="tall">1</item>
|
||||
<item style="grid-column:2/3">2</item>
|
||||
<item style="grid-column:3/4">3</item>
|
||||
<item style="grid-column:4/5">4</item>
|
||||
<item style="grid-column:2/3">5</item>
|
||||
<item style="grid-column:3/4">6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="align-content:center">
|
||||
<item style="grid-column:1/2" class="tall">1</item>
|
||||
<item style="grid-column:2/3">2</item>
|
||||
<item style="grid-column:3/4">3</item>
|
||||
<item style="grid-column:4/5">4</item>
|
||||
<item style="grid-column:2/3">5</item>
|
||||
<item style="grid-column:3/4">6</item>
|
||||
</grid>
|
||||
|
|
@ -0,0 +1,125 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Test: Masonry layout with `align-content` in masonry axis</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-2">
|
||||
<link rel="match" href="masonry-align-content-001-ref.html">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
|
||||
grid {
|
||||
display: inline-grid;
|
||||
gap: 1px 2px;
|
||||
grid-template-columns: repeat(4,20px);
|
||||
grid-template-rows: masonry;
|
||||
color: #444;
|
||||
border: 1px solid;
|
||||
padding: 2px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
item {
|
||||
background-color: #444;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<grid style="align-content:start">
|
||||
<item style="padding-top:30px">1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="align-content:start">
|
||||
<item>1</item>
|
||||
<item style="padding-top:30px">2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="align-content:end">
|
||||
<item style="padding-top:30px">1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="align-content:end">
|
||||
<item>1</item>
|
||||
<item style="padding-top:30px">2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="align-content:center">
|
||||
<item style="padding-top:30px">1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="align-content:center">
|
||||
<item>1</item>
|
||||
<item style="padding-top:30px">2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="align-content:stretch">
|
||||
<item style="padding-top:30px">1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="align-content:space-between">
|
||||
<item style="padding-top:30px">1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="align-content:space-around">
|
||||
<item style="padding-top:30px">1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="align-content:space-evenly">
|
||||
<item style="padding-top:30px">1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
|
@ -0,0 +1,126 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>Reference: Masonry layout with `align-content` in masonry axis</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
|
||||
grid {
|
||||
display: inline-grid;
|
||||
gap: 1px 2px;
|
||||
grid-template-columns: repeat(4,20px);
|
||||
grid-template-rows: 1em auto;
|
||||
color: #444;
|
||||
border: 1px solid;
|
||||
padding: 2px;
|
||||
width: 100px;
|
||||
align-items: start;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
item {
|
||||
background-color: #444;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.tall { padding-right:30px; grid-row:span 2; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<grid style="align-content:start">
|
||||
<item style="grid-column:1/2" class="tall">1</item>
|
||||
<item style="grid-column:2/3">2</item>
|
||||
<item style="grid-column:3/4">3</item>
|
||||
<item style="grid-column:4/5">4</item>
|
||||
<item style="grid-column:2/3">5</item>
|
||||
<item style="grid-column:3/4">6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="align-content:start">
|
||||
<item style="grid-column:1/2">1</item>
|
||||
<item style="grid-column:2/3" class="tall">2</item>
|
||||
<item style="grid-column:3/4">3</item>
|
||||
<item style="grid-column:4/5">4</item>
|
||||
<item style="grid-column:1/2">5</item>
|
||||
<item style="grid-column:3/4">6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="align-content:end">
|
||||
<item style="grid-column:1/2" class="tall">1</item>
|
||||
<item style="grid-column:2/3">2</item>
|
||||
<item style="grid-column:3/4">3</item>
|
||||
<item style="grid-column:4/5">4</item>
|
||||
<item style="grid-column:2/3">5</item>
|
||||
<item style="grid-column:3/4">6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="align-content:end">
|
||||
<item style="grid-column:1/2">1</item>
|
||||
<item style="grid-column:2/3" class="tall">2</item>
|
||||
<item style="grid-column:3/4">3</item>
|
||||
<item style="grid-column:4/5">4</item>
|
||||
<item style="grid-column:1/2">5</item>
|
||||
<item style="grid-column:3/4">6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="align-content:center">
|
||||
<item style="grid-column:1/2" class="tall">1</item>
|
||||
<item style="grid-column:2/3">2</item>
|
||||
<item style="grid-column:3/4">3</item>
|
||||
<item style="grid-column:4/5">4</item>
|
||||
<item style="grid-column:2/3">5</item>
|
||||
<item style="grid-column:3/4">6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="align-content:center">
|
||||
<item style="grid-column:1/2">1</item>
|
||||
<item style="grid-column:2/3" class="tall">2</item>
|
||||
<item style="grid-column:3/4">3</item>
|
||||
<item style="grid-column:4/5">4</item>
|
||||
<item style="grid-column:1/2">5</item>
|
||||
<item style="grid-column:3/4">6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="align-content:stretch">
|
||||
<item style="grid-column:1/2" class="tall">1</item>
|
||||
<item style="grid-column:2/3">2</item>
|
||||
<item style="grid-column:3/4">3</item>
|
||||
<item style="grid-column:4/5">4</item>
|
||||
<item style="grid-column:2/3">5</item>
|
||||
<item style="grid-column:3/4">6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="align-content:start">
|
||||
<item style="grid-column:1/2" class="tall">1</item>
|
||||
<item style="grid-column:2/3">2</item>
|
||||
<item style="grid-column:3/4">3</item>
|
||||
<item style="grid-column:4/5">4</item>
|
||||
<item style="grid-column:2/3">5</item>
|
||||
<item style="grid-column:3/4">6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="align-content:center">
|
||||
<item style="grid-column:1/2" class="tall">1</item>
|
||||
<item style="grid-column:2/3">2</item>
|
||||
<item style="grid-column:3/4">3</item>
|
||||
<item style="grid-column:4/5">4</item>
|
||||
<item style="grid-column:2/3">5</item>
|
||||
<item style="grid-column:3/4">6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="align-content:center">
|
||||
<item style="grid-column:1/2" class="tall">1</item>
|
||||
<item style="grid-column:2/3">2</item>
|
||||
<item style="grid-column:3/4">3</item>
|
||||
<item style="grid-column:4/5">4</item>
|
||||
<item style="grid-column:2/3">5</item>
|
||||
<item style="grid-column:3/4">6</item>
|
||||
</grid>
|
||||
|
|
@ -0,0 +1,126 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Test: Masonry layout with `align-content` in masonry axis</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-2">
|
||||
<link rel="match" href="masonry-align-content-002-ref.html">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
|
||||
grid {
|
||||
display: inline-grid;
|
||||
gap: 1px 2px;
|
||||
grid-template-columns: repeat(4,20px);
|
||||
grid-template-rows: masonry;
|
||||
color: #444;
|
||||
border: 1px solid;
|
||||
padding: 2px;
|
||||
width: 100px;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
item {
|
||||
background-color: #444;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<grid style="align-content:start">
|
||||
<item style="padding-right:30px">1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="align-content:start">
|
||||
<item>1</item>
|
||||
<item style="padding-right:30px">2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="align-content:end">
|
||||
<item style="padding-right:30px">1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="align-content:end">
|
||||
<item>1</item>
|
||||
<item style="padding-right:30px">2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="align-content:center">
|
||||
<item style="padding-right:30px">1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="align-content:center">
|
||||
<item>1</item>
|
||||
<item style="padding-right:30px">2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="align-content:stretch">
|
||||
<item style="padding-right:30px">1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="align-content:space-between">
|
||||
<item style="padding-right:30px">1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="align-content:space-around">
|
||||
<item style="padding-right:30px">1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="align-content:space-evenly">
|
||||
<item style="padding-right:30px">1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
|
@ -0,0 +1,127 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>Reference: Masonry layout with `align-content` in grid axis</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
|
||||
grid {
|
||||
display: inline-grid;
|
||||
gap: 1px 2px;
|
||||
grid-template-columns: 1ch auto;
|
||||
grid-template-rows: repeat(4,auto);
|
||||
background: content-box silver;
|
||||
border: 1px solid;
|
||||
padding: 0 3px 2px 0;
|
||||
width: 100px;
|
||||
height: 120px;
|
||||
align-content: center;
|
||||
justify-items: start;
|
||||
}
|
||||
|
||||
item {
|
||||
background-color: #444;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.tall { grid-row: span 2; padding: 3px 11px 1px 13px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<grid style="align-content:start">
|
||||
<item class="tall" style="grid-row:1/2">1</item>
|
||||
<item style="grid-row:2/3">2</item>
|
||||
<item style="grid-row:3/4">3</item>
|
||||
<item style="grid-row:4/5">4</item>
|
||||
<item style="grid-row:2/3">5</item>
|
||||
<item style="grid-row:3/4">6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="align-content:start">
|
||||
<item style="grid-row:1/2">1</item>
|
||||
<item class="tall" style="grid-row:2/3">2</item>
|
||||
<item style="grid-row:3/4">3</item>
|
||||
<item style="grid-row:4/5">4</item>
|
||||
<item style="grid-row:1/2">5</item>
|
||||
<item style="grid-row:3/4">6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="align-content:end">
|
||||
<item class="tall" style="grid-row:1/2">1</item>
|
||||
<item style="grid-row:2/3">2</item>
|
||||
<item style="grid-row:3/4">3</item>
|
||||
<item style="grid-row:4/5">4</item>
|
||||
<item style="grid-row:2/3">5</item>
|
||||
<item style="grid-row:3/4">6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="align-content:end">
|
||||
<item style="grid-row:1/2">1</item>
|
||||
<item class="tall" style="grid-row:2/3">2</item>
|
||||
<item style="grid-row:3/4">3</item>
|
||||
<item style="grid-row:4/5">4</item>
|
||||
<item style="grid-row:1/2">5</item>
|
||||
<item style="grid-row:3/4">6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="align-content:center">
|
||||
<item class="tall" style="grid-row:1/2">1</item>
|
||||
<item style="grid-row:2/3">2</item>
|
||||
<item style="grid-row:3/4">3</item>
|
||||
<item style="grid-row:4/5">4</item>
|
||||
<item style="grid-row:2/3">5</item>
|
||||
<item style="grid-row:3/4">6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="align-content:center">
|
||||
<item style="grid-row:1/2">1</item>
|
||||
<item class="tall" style="grid-row:2/3">2</item>
|
||||
<item style="grid-row:3/4">3</item>
|
||||
<item style="grid-row:4/5">4</item>
|
||||
<item style="grid-row:1/2">5</item>
|
||||
<item style="grid-row:3/4">6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="align-content:stretch">
|
||||
<item class="tall" style="grid-row:1/2">1</item>
|
||||
<item style="grid-row:2/3">2</item>
|
||||
<item style="grid-row:3/4">3</item>
|
||||
<item style="grid-row:4/5">4</item>
|
||||
<item style="grid-row:2/3">5</item>
|
||||
<item style="grid-row:3/4">6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="align-content:space-between">
|
||||
<item class="tall" style="grid-row:1/2">1</item>
|
||||
<item style="grid-row:2/3">2</item>
|
||||
<item style="grid-row:3/4">3</item>
|
||||
<item style="grid-row:4/5">4</item>
|
||||
<item style="grid-row:2/3">5</item>
|
||||
<item style="grid-row:3/4">6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="align-content:space-around">
|
||||
<item class="tall" style="grid-row:1/2">1</item>
|
||||
<item style="grid-row:2/3">2</item>
|
||||
<item style="grid-row:3/4">3</item>
|
||||
<item style="grid-row:4/5">4</item>
|
||||
<item style="grid-row:2/3">5</item>
|
||||
<item style="grid-row:3/4">6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="align-content:space-evenly">
|
||||
<item class="tall" style="grid-row:1/2">1</item>
|
||||
<item style="grid-row:2/3">2</item>
|
||||
<item style="grid-row:3/4">3</item>
|
||||
<item style="grid-row:4/5">4</item>
|
||||
<item style="grid-row:2/3">5</item>
|
||||
<item style="grid-row:3/4">6</item>
|
||||
</grid>
|
||||
|
|
@ -0,0 +1,129 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Test: Masonry layout with `align-content` in grid axis</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-2">
|
||||
<link rel="match" href="masonry-align-content-003-ref.html">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
|
||||
grid {
|
||||
display: inline-grid;
|
||||
gap: 1px 2px;
|
||||
grid-template-columns: masonry;
|
||||
grid-template-rows: repeat(4,auto);
|
||||
background: content-box silver;
|
||||
border: 1px solid;
|
||||
padding: 0 3px 2px 0;
|
||||
width: 100px;
|
||||
height: 120px;
|
||||
align-content: center;
|
||||
justify-items: start;
|
||||
}
|
||||
|
||||
item {
|
||||
background-color: #444;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.tall { padding: 3px 11px 1px 13px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<grid style="align-content:start">
|
||||
<item class="tall">1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="align-content:start">
|
||||
<item>1</item>
|
||||
<item class="tall">2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="align-content:end">
|
||||
<item class="tall">1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="align-content:end">
|
||||
<item>1</item>
|
||||
<item class="tall">2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="align-content:center">
|
||||
<item class="tall">1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="align-content:center">
|
||||
<item>1</item>
|
||||
<item class="tall">2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="align-content:stretch">
|
||||
<item class="tall">1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="align-content:space-between">
|
||||
<item class="tall">1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="align-content:space-around">
|
||||
<item class="tall">1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="align-content:space-evenly">
|
||||
<item class="tall">1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
|
@ -0,0 +1,126 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>Reference: Masonry layout with `align-content` in grid axis</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
|
||||
grid {
|
||||
display: inline-grid;
|
||||
gap: 1px 2px;
|
||||
grid-template-columns: 1ch auto;
|
||||
grid-template-rows: repeat(4,20px);
|
||||
background: content-box silver;
|
||||
border: 1px solid;
|
||||
padding: 2px;
|
||||
width: 100px;
|
||||
justify-items: start;
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
item {
|
||||
background-color: #444;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.tall { grid-column: span 2; padding-top: 30px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<grid style="align-content:start">
|
||||
<item class="tall" style="grid-row:1/2">1</item>
|
||||
<item style="grid-row:2/3">2</item>
|
||||
<item style="grid-row:3/4">3</item>
|
||||
<item style="grid-row:4/5">4</item>
|
||||
<item style="grid-row:2/3">5</item>
|
||||
<item style="grid-row:3/4">6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="align-content:start">
|
||||
<item style="grid-row:1/2">1</item>
|
||||
<item class="tall" style="grid-row:2/3">2</item>
|
||||
<item style="grid-row:3/4">3</item>
|
||||
<item style="grid-row:4/5">4</item>
|
||||
<item style="grid-row:1/2">5</item>
|
||||
<item style="grid-row:3/4">6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="align-content:end">
|
||||
<item class="tall" style="grid-row:1/2">1</item>
|
||||
<item style="grid-row:2/3">2</item>
|
||||
<item style="grid-row:3/4">3</item>
|
||||
<item style="grid-row:4/5">4</item>
|
||||
<item style="grid-row:2/3">5</item>
|
||||
<item style="grid-row:3/4">6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="align-content:end">
|
||||
<item style="grid-row:1/2">1</item>
|
||||
<item class="tall" style="grid-row:2/3">2</item>
|
||||
<item style="grid-row:3/4">3</item>
|
||||
<item style="grid-row:4/5">4</item>
|
||||
<item style="grid-row:1/2">5</item>
|
||||
<item style="grid-row:3/4">6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="align-content:center">
|
||||
<item class="tall" style="grid-row:1/2">1</item>
|
||||
<item style="grid-row:2/3">2</item>
|
||||
<item style="grid-row:3/4">3</item>
|
||||
<item style="grid-row:4/5">4</item>
|
||||
<item style="grid-row:2/3">5</item>
|
||||
<item style="grid-row:3/4">6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="align-content:center">
|
||||
<item style="grid-row:1/2">1</item>
|
||||
<item class="tall" style="grid-row:2/3">2</item>
|
||||
<item style="grid-row:3/4">3</item>
|
||||
<item style="grid-row:4/5">4</item>
|
||||
<item style="grid-row:1/2">5</item>
|
||||
<item style="grid-row:3/4">6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="align-content:stretch">
|
||||
<item class="tall" style="grid-row:1/2">1</item>
|
||||
<item style="grid-row:2/3">2</item>
|
||||
<item style="grid-row:3/4">3</item>
|
||||
<item style="grid-row:4/5">4</item>
|
||||
<item style="grid-row:2/3">5</item>
|
||||
<item style="grid-row:3/4">6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="align-content:space-between">
|
||||
<item class="tall" style="grid-row:1/2">1</item>
|
||||
<item style="grid-row:2/3">2</item>
|
||||
<item style="grid-row:3/4">3</item>
|
||||
<item style="grid-row:4/5">4</item>
|
||||
<item style="grid-row:2/3">5</item>
|
||||
<item style="grid-row:3/4">6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="align-content:space-around">
|
||||
<item class="tall" style="grid-row:1/2">1</item>
|
||||
<item style="grid-row:2/3">2</item>
|
||||
<item style="grid-row:3/4">3</item>
|
||||
<item style="grid-row:4/5">4</item>
|
||||
<item style="grid-row:2/3">5</item>
|
||||
<item style="grid-row:3/4">6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="align-content:space-evenly">
|
||||
<item class="tall" style="grid-row:1/2">1</item>
|
||||
<item style="grid-row:2/3">2</item>
|
||||
<item style="grid-row:3/4">3</item>
|
||||
<item style="grid-row:4/5">4</item>
|
||||
<item style="grid-row:2/3">5</item>
|
||||
<item style="grid-row:3/4">6</item>
|
||||
</grid>
|
||||
|
|
@ -0,0 +1,127 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Test: Masonry layout with `align-content` in grid axis</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-2">
|
||||
<link rel="match" href="masonry-align-content-004-ref.html">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
|
||||
grid {
|
||||
display: inline-grid;
|
||||
gap: 1px 2px;
|
||||
grid-template-columns: masonry;
|
||||
grid-template-rows: repeat(4,20px);
|
||||
background: content-box silver;
|
||||
border: 1px solid;
|
||||
padding: 2px;
|
||||
width: 100px;
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
item {
|
||||
background-color: #444;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.tall { padding-top: 30px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<grid style="align-content:start">
|
||||
<item class="tall">1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="align-content:start">
|
||||
<item>1</item>
|
||||
<item class="tall">2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="align-content:end">
|
||||
<item class="tall">1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="align-content:end">
|
||||
<item>1</item>
|
||||
<item class="tall">2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="align-content:center">
|
||||
<item class="tall">1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="align-content:center">
|
||||
<item>1</item>
|
||||
<item class="tall">2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="align-content:stretch">
|
||||
<item class="tall">1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="align-content:space-between">
|
||||
<item class="tall">1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="align-content:space-around">
|
||||
<item class="tall">1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="align-content:space-evenly">
|
||||
<item class="tall">1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
|
@ -0,0 +1,120 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>Reference: Masonry layout with `align-tracks` alignment</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
|
||||
.hl { writing-mode: horizontal-tb; direction:ltr; }
|
||||
.hr { writing-mode: horizontal-tb; direction:rtl; }
|
||||
.vll { writing-mode: vertical-lr; direction:ltr; }
|
||||
.vlr { writing-mode: vertical-lr; direction:rtl; }
|
||||
.vrl { writing-mode: vertical-rl; direction:ltr; }
|
||||
.vrr { writing-mode: vertical-rl; direction:rtl; }
|
||||
.swl { writing-mode: sideways-lr; direction:ltr; }
|
||||
.swr { writing-mode: sideways-lr; direction:rtl; }
|
||||
|
||||
grid {
|
||||
display: inline-grid;
|
||||
gap: 1px 2px;
|
||||
background: content-box silver;
|
||||
color: #444;
|
||||
padding: 1px 2px;
|
||||
block-size: 30px;
|
||||
vertical-align: top;
|
||||
}
|
||||
grid.vll, grid.vrr, grid.vlr, grid.vrl, grid.swl, grid.swr {
|
||||
inline-size: 22px;
|
||||
}
|
||||
|
||||
grid > div {
|
||||
display: inline-flex;
|
||||
inline-size: min-content;
|
||||
}
|
||||
|
||||
grid2 {
|
||||
display: inline-grid;
|
||||
row-gap: 1px;
|
||||
grid-template-columns: 8px;
|
||||
vertical-align: top;
|
||||
block-size: 21px;
|
||||
}
|
||||
|
||||
item {
|
||||
background-color: #444;
|
||||
color: #fff;
|
||||
writing-mode: horizontal-tb;
|
||||
direction: ltr;
|
||||
}
|
||||
grid2:nth-child(1) {
|
||||
grid-template-rows: 8px 8px;
|
||||
margin-inline-end: 2px;
|
||||
}
|
||||
grid2:nth-child(2) {
|
||||
grid-template-rows: 12px 8px;
|
||||
}
|
||||
|
||||
.vll grid2:nth-child(1) { block-size:17px; }
|
||||
.vrr grid2:nth-child(1) { block-size:17px; }
|
||||
.vlr grid2:nth-child(1) { block-size:17px; }
|
||||
.vrl grid2:nth-child(1) { block-size:17px; }
|
||||
.swl grid2:nth-child(1) { block-size:17px; }
|
||||
.swr grid2:nth-child(1) { block-size:17px; }
|
||||
|
||||
.vll grid2:nth-child(2) { grid-template-rows:8px 8px; }
|
||||
.vrr grid2:nth-child(2) { grid-template-rows:8px 8px; }
|
||||
.vlr grid2:nth-child(2) { grid-template-rows:8px 8px; }
|
||||
.vrl grid2:nth-child(2) { grid-template-rows:8px 8px; }
|
||||
.swl grid2:nth-child(2) { grid-template-rows:8px 8px; }
|
||||
.swr grid2:nth-child(2) { grid-template-rows:8px 8px; }
|
||||
|
||||
grid2:nth-child(1) > item:nth-child(1) { background: blue; inline-size:8px; block-size:8px; z-index:1; }
|
||||
grid2:nth-child(2) > item:nth-child(1) { background: magenta; inline-size:8px; block-size:12px; z-index:1; }
|
||||
grid2:nth-child(1) > item:nth-child(2) { background: lime; inline-size:12px; block-size:8px; z-index:2; }
|
||||
grid2:nth-child(2) > item:nth-child(2) { background: purple; inline-size:8px; block-size:8px; z-index:2; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div style="display:none">
|
||||
<grid>
|
||||
<div>
|
||||
<grid2>
|
||||
<item></item>
|
||||
<item></item>
|
||||
</grid2><grid2>
|
||||
<item></item>
|
||||
<item></item>
|
||||
</grid2>
|
||||
</div>
|
||||
</grid>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
let wms = [ "hl", "hr", "vll", "vrr", "vlr", "vrl", "swl", "swr", ];
|
||||
let ats = [ "start", "self-start", "center", "end", "self-end", "stretch", "space-between", "space-around", "space-evenly", ];
|
||||
let acs = [ "start", "center", "end", ];
|
||||
let grid = document.getElementsByTagName('grid')[0];
|
||||
for (const ac of acs) {
|
||||
for (const at of ats) {
|
||||
for (const wm of wms) {
|
||||
let e = grid.cloneNode(true);
|
||||
e.className = wm;
|
||||
e.children[0].children[1].style.className = wm;
|
||||
e.children[0].children[0].style.alignContent = at;
|
||||
e.children[0].children[1].style.alignContent = at;
|
||||
e.style.alignContent = ac;
|
||||
document.body.appendChild(e);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,80 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Test: Masonry layout with `align-tracks` alignment</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-2">
|
||||
<link rel="match" href="masonry-align-tracks-001-ref.html">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
|
||||
.hl { writing-mode: horizontal-tb; direction:ltr; }
|
||||
.hr { writing-mode: horizontal-tb; direction:rtl; }
|
||||
.vll { writing-mode: vertical-lr; direction:ltr; }
|
||||
.vlr { writing-mode: vertical-lr; direction:rtl; }
|
||||
.vrl { writing-mode: vertical-rl; direction:ltr; }
|
||||
.vrr { writing-mode: vertical-rl; direction:rtl; }
|
||||
.swl { writing-mode: sideways-lr; direction:ltr; }
|
||||
.swr { writing-mode: sideways-lr; direction:rtl; }
|
||||
|
||||
grid {
|
||||
display: inline-grid;
|
||||
gap: 1px 2px;
|
||||
grid-template-columns: repeat(2,auto);
|
||||
grid-template-rows: masonry;
|
||||
background: content-box silver;
|
||||
color: #444;
|
||||
padding: 1px 2px;
|
||||
block-size: 30px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
item {
|
||||
background-color: #444;
|
||||
color: #fff;
|
||||
writing-mode: horizontal-tb;
|
||||
direction: ltr;
|
||||
}
|
||||
|
||||
item:nth-child(1) { background: blue; inline-size:8px; block-size:8px; }
|
||||
item:nth-child(2) { background: magenta; inline-size:8px; block-size:12px; }
|
||||
item:nth-child(3) { background: lime; inline-size:12px; block-size:8px; }
|
||||
item:nth-child(4) { background: purple; inline-size:8px; block-size:8px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div style="display:none">
|
||||
<grid>
|
||||
<item></item>
|
||||
<item></item>
|
||||
<item></item>
|
||||
<item></item>
|
||||
</grid>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
let wms = [ "hl", "hr", "vll", "vrr", "vlr", "vrl", "swl", "swr", ];
|
||||
let ats = [ "start", "self-start", "center", "end", "self-end", "stretch", "space-between", "space-around", "space-evenly", ];
|
||||
let acs = [ "start", "center", "end", ];
|
||||
let grid = document.getElementsByTagName('grid')[0];
|
||||
for (const ac of acs) {
|
||||
for (const at of ats) {
|
||||
for (const wm of wms) {
|
||||
let e = grid.cloneNode(true);
|
||||
e.className = wm;
|
||||
e.style.alignTracks = at;
|
||||
e.style.alignContent = ac;
|
||||
document.body.appendChild(e);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,116 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>Reference: Masonry layout with multiple `align-tracks` values</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
grid {
|
||||
display: inline-grid;
|
||||
grid-template-rows: auto;
|
||||
grid-template-columns: repeat(8,50px); /*intentionally one more than align-tracks values*/
|
||||
gap: 3px 5px;
|
||||
padding: 10px 3px 1px 7px;
|
||||
border: solid;
|
||||
border-width: 1px 7px 3px 5px;
|
||||
background: lightgrey content-box;
|
||||
height: 500px;
|
||||
vertical-align: top;
|
||||
}
|
||||
.fallback { grid-template-columns:3px; padding:0; border:0; }
|
||||
item {
|
||||
background: grey;
|
||||
height: 2em;
|
||||
position: relative;
|
||||
border: 1px solid;
|
||||
}
|
||||
.purple { background:purple; height:auto; border-top:3px solid; }
|
||||
z { display: block; background: yellow; height: 0; width:80%; }
|
||||
a {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
top: auto;
|
||||
border: 2px solid lime;
|
||||
}
|
||||
masonry-track {
|
||||
display: grid;
|
||||
gap: 3px 5px;
|
||||
}
|
||||
masonry-track:nth-child(1) { align-content:start }
|
||||
masonry-track:nth-child(2) { align-content:end }
|
||||
masonry-track:nth-child(3) { align-content:center }
|
||||
masonry-track:nth-child(4) { align-content:stretch; grid-template-rows: auto auto repeat(3,max-content) }
|
||||
masonry-track:nth-child(5) { align-content:space-between }
|
||||
masonry-track:nth-child(6) { align-content:space-around }
|
||||
masonry-track:nth-child(7) { align-content:space-evenly }
|
||||
masonry-track:nth-child(8) { align-content:space-evenly }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<grid>
|
||||
<masonry-track>
|
||||
<item style="width:25px">1</item>
|
||||
<item>11</item>
|
||||
<item class="purple">20</item>
|
||||
<item class="purple">24</item>
|
||||
<item>29</item>
|
||||
</masonry-track>
|
||||
<masonry-track>
|
||||
<item class="purple" style="height:50px">2</item>
|
||||
<item class="purple" style="writing-mode:vertical-rl">16 vertical-rl</item>
|
||||
</masonry-track>
|
||||
<masonry-track>
|
||||
<item style="margin-left:5px">3</item>
|
||||
<item class="purple">12<z></z></item>
|
||||
<item>17</item>
|
||||
<item>25</item>
|
||||
<item>33</item>
|
||||
</masonry-track>
|
||||
<masonry-track>
|
||||
<item class="purple" style="margin-top:5px">4</item>
|
||||
<item class="purple">10</item>
|
||||
<item>15</item>
|
||||
<item>23</item>
|
||||
<item>31</item>
|
||||
</masonry-track>
|
||||
<masonry-track>
|
||||
<item>5</item>
|
||||
<item>13</item>
|
||||
<item>21</item>
|
||||
<item class="purple">28</item>
|
||||
</masonry-track>
|
||||
<masonry-track>
|
||||
<item class="purple">6<a></a></item>
|
||||
<item>9<a></a></item>
|
||||
<item class="purple">18</item>
|
||||
<item class="purple">22</item>
|
||||
<item>27</item>
|
||||
</masonry-track>
|
||||
<masonry-track>
|
||||
<item>7</item>
|
||||
<item class="purple">14<z></z><a></a></item>
|
||||
<item>19</item>
|
||||
<item class="purple">26</item>
|
||||
<item class="purple">30</item>
|
||||
</masonry-track>
|
||||
<masonry-track>
|
||||
<item class="purple" style="writing-mode:vertical-lr">8 vertical-lr</item>
|
||||
<item class="purple">32</item>
|
||||
</masonry-track>
|
||||
</grid>
|
||||
<grid class="fallback" style="align-content:start">
|
||||
<item></item>
|
||||
</grid>
|
||||
<grid class="fallback" style="align-content:center">
|
||||
<item></item>
|
||||
</grid>
|
||||
<grid class="fallback" style="align-content:center">
|
||||
<item></item>
|
||||
</grid>
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,91 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Test: Masonry layout with multiple `align-tracks` values</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-2">
|
||||
<link rel="match" href="masonry-align-tracks-multi-001-ref.html">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
grid {
|
||||
display: inline-grid;
|
||||
grid-template-rows: masonry;
|
||||
grid-template-columns: repeat(8,50px); /*intentionally one more than align-tracks values*/
|
||||
gap: 3px 5px;
|
||||
padding: 10px 3px 1px 7px;
|
||||
border: solid;
|
||||
border-width: 1px 7px 3px 5px;
|
||||
background: lightgrey content-box;
|
||||
align-tracks: start,end,center,stretch,space-between,space-around,space-evenly;
|
||||
height: 500px;
|
||||
vertical-align: top;
|
||||
}
|
||||
.fallback { grid-template-columns:3px; padding:0; border:0; }
|
||||
item {
|
||||
background: grey;
|
||||
height: 2em;
|
||||
position: relative;
|
||||
border: 1px solid;
|
||||
}
|
||||
item:nth-child(2n) { background:purple; height:auto; border-top:3px solid; }
|
||||
z { display: block; background: yellow; height: 20%; width:80%; }
|
||||
a {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
top: auto;
|
||||
border: 2px solid lime;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<grid>
|
||||
<item style="width:50%">1</item>
|
||||
<item style="height:10%">2</item>
|
||||
<item style="margin-left:10%">3</item>
|
||||
<item style="margin-top:10%">4</item>
|
||||
<item>5</item>
|
||||
<item>6<a></a></item>
|
||||
<item>7</item>
|
||||
<item style="writing-mode:vertical-lr">8 vertical-lr</item>
|
||||
<item>9<a></a></item>
|
||||
<item>10</item>
|
||||
<item>11</item>
|
||||
<item>12<z></z></item>
|
||||
<item>13</item>
|
||||
<item><z></z>14<a></a></item>
|
||||
<item>15</item>
|
||||
<item style="writing-mode:vertical-rl">16 vertical-rl</item>
|
||||
<item>17</item>
|
||||
<item>18</item>
|
||||
<item>19</item>
|
||||
<item>20</item>
|
||||
<item>21</item>
|
||||
<item>22</item>
|
||||
<item>23</item>
|
||||
<item>24</item>
|
||||
<item>25</item>
|
||||
<item>26</item>
|
||||
<item>27</item>
|
||||
<item>28</item>
|
||||
<item>29</item>
|
||||
<item>30</item>
|
||||
<item>31</item>
|
||||
<item>32</item>
|
||||
<item>33</item>
|
||||
</grid>
|
||||
<grid class="fallback" style="align-tracks:space-between">
|
||||
<item></item>
|
||||
</grid>
|
||||
<grid class="fallback" style="align-tracks:space-around">
|
||||
<item></item>
|
||||
</grid>
|
||||
<grid class="fallback" style="align-tracks:space-evenly">
|
||||
<item></item>
|
||||
</grid>
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,87 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>Reference: Masonry layout with `align-tracks:stretch`</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:16px/1 Ahem; padding:0; margin:0;
|
||||
}
|
||||
grid {
|
||||
display: inline-grid;
|
||||
grid-template-rows: 500px;
|
||||
grid-template-columns: 150px 100px 50px;
|
||||
gap: 3px 5px;
|
||||
padding: 10px;
|
||||
border: 3px solid;
|
||||
background: lightgrey content-box;
|
||||
height: 500px;
|
||||
}
|
||||
masonry-track {
|
||||
display: grid;
|
||||
gap: 3px 5px;
|
||||
align-content: stretch;
|
||||
height: 500px;
|
||||
}
|
||||
masonry-track:nth-child(1) {
|
||||
grid-template-columns: 150px;
|
||||
grid-template-rows: min-content min-content min-content auto min-content min-content min-content;
|
||||
}
|
||||
masonry-track:nth-child(2) {
|
||||
grid-template-columns: 100px;
|
||||
grid-template-rows: auto 50px auto auto 30px;
|
||||
}
|
||||
masonry-track:nth-child(3) {
|
||||
grid-template-columns: 50px;
|
||||
grid-template-rows: 30px 30px 30px auto 30px 30px auto auto;
|
||||
}
|
||||
item {
|
||||
background: grey;
|
||||
height: 30px;
|
||||
position: relative;
|
||||
}
|
||||
.purple { background:purple; height:auto; }
|
||||
z { display: block; background: yellow; height: 20%; width:80%; }
|
||||
a {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
top: auto;
|
||||
border: 2px solid lime;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<grid>
|
||||
<masonry-track>
|
||||
<item style="border:10px solid; margin: 10px 0 5px 3px;">1</item>
|
||||
<item>9<a></a></item>
|
||||
<item>11</item>
|
||||
<item class="purple">12<br><br><z></z></item>
|
||||
<item class="purple" style="height:116px; border:2px solid; margin:1px">14<z></z><a></a></item>
|
||||
<item style="align-self:start" class="purple">16</item>
|
||||
<item>17</item>
|
||||
</masonry-track>
|
||||
<masonry-track>
|
||||
<item class="purple">2</item>
|
||||
<item style="height:40px; margin-top:10px" class="purple">4</item>
|
||||
<item class="purple">6<a></a></item>
|
||||
<item style="writing-mode:vertical-lr" class="purple">8 vertical</item>
|
||||
<item>19</item>
|
||||
</masonry-track>
|
||||
<masonry-track>
|
||||
<item>3</item>
|
||||
<item>5</item>
|
||||
<item>7</item>
|
||||
<item class="purple">10 A<br>B</item>
|
||||
<item>13</item>
|
||||
<item>15</item>
|
||||
<item style="margin:auto 0" class="purple">18</item>
|
||||
<item style="margin-top: auto" class="purple">20</item>
|
||||
</masonry-track>
|
||||
</grid>
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Test: Masonry layout with `align-tracks:stretch`</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-2">
|
||||
<link rel="match" href="masonry-align-tracks-stretch-001-ref.html">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:16px/1 Ahem; padding:0; margin:0;
|
||||
}
|
||||
grid {
|
||||
display: inline-grid;
|
||||
grid-template-rows: masonry;
|
||||
grid-template-columns: 150px 100px 50px;
|
||||
gap: 3px 5px;
|
||||
padding: 10px;
|
||||
border: 3px solid;
|
||||
background: lightgrey content-box;
|
||||
align-tracks: stretch;
|
||||
height: 500px;
|
||||
}
|
||||
item {
|
||||
background: grey;
|
||||
height: 30px;
|
||||
position: relative;
|
||||
}
|
||||
item:nth-child(2n) { background:purple; height:auto; }
|
||||
item:nth-child(1) { border:10px solid; margin: 10px 0 5px 3px; }
|
||||
z { display: block; background: yellow; height: 20%; width:80%; }
|
||||
a {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
top: auto;
|
||||
border: 2px solid lime;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<grid>
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item style="max-height:40px; margin-top:10px">4</item>
|
||||
<item>5</item>
|
||||
<item>6<a></a></item>
|
||||
<item>7</item>
|
||||
<item style="writing-mode:vertical-lr">8 vertical</item>
|
||||
<item>9<a></a></item>
|
||||
<item>10 A<br>B</item>
|
||||
<item>11</item>
|
||||
<item>12<br><br><z></z></item>
|
||||
<item>13</item>
|
||||
<item style="max-height:120px; border:2px solid; box-sizing:border-box; margin:1px">14<z></z><a></a></item>
|
||||
<item>15</item>
|
||||
<item style="align-self:end">16</item>
|
||||
<item>17</item>
|
||||
<item style="margin:auto 0">18</item>
|
||||
<item>19</item>
|
||||
<item style="margin-top: auto">20</item>
|
||||
</grid>
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>Reference: Masonry layout with `align-tracks:stretch`</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:6px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
grid {
|
||||
display: inline-grid;
|
||||
grid-template-rows: auto auto;
|
||||
grid-template-columns: 30px;
|
||||
gap: 1px 2px;
|
||||
padding: 2px 3px 1px 1px;
|
||||
border-style: solid;
|
||||
border-width: 1px 7px 3px 5px;
|
||||
border-inline-start-color: magenta;
|
||||
border-block-start-color: blue;
|
||||
background: lightgrey content-box;
|
||||
block-size: 25px;
|
||||
vertical-align: top;
|
||||
}
|
||||
item {
|
||||
border-inline-start: 1px solid magenta;
|
||||
border-block-start: 2px solid blue;
|
||||
}
|
||||
item:nth-child(2n+1) { background: grey; }
|
||||
item:nth-child(2n) { background: cyan; }
|
||||
.hl { writing-mode: horizontal-tb; direction:ltr; }
|
||||
.hr { writing-mode: horizontal-tb; direction:rtl; }
|
||||
.vll { writing-mode: vertical-lr; direction:ltr; }
|
||||
.vlr { writing-mode: vertical-lr; direction:rtl; }
|
||||
.vrl { writing-mode: vertical-rl; direction:ltr; }
|
||||
.vrr { writing-mode: vertical-rl; direction:rtl; }
|
||||
.swl { writing-mode: sideways-lr; direction:ltr; }
|
||||
.swr { writing-mode: sideways-lr; direction:rtl; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div style="display:none">
|
||||
<grid>
|
||||
<item>1</item>
|
||||
<item>2a<br>2b</item>
|
||||
</grid>
|
||||
</div>
|
||||
<script>
|
||||
let wms = [ "hl", "hr", "vll", "vrr", "vlr", "vrl", "swl", "swr", ];
|
||||
let grid = document.getElementsByTagName('grid')[0];
|
||||
for (const reorder of [false, true]) {
|
||||
for (const cb_wm of wms) {
|
||||
for (const child_wm of wms) {
|
||||
let e = grid.cloneNode(true);
|
||||
e.className = cb_wm;
|
||||
e.children[1].className = child_wm;
|
||||
if (reorder) {
|
||||
e.children[0].style.order = '1';
|
||||
}
|
||||
document.body.appendChild(e);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,71 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Test: Masonry layout with `align-tracks:stretch`</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-2">
|
||||
<link rel="match" href="masonry-align-tracks-stretch-002-ref.html">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:6px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
grid {
|
||||
display: inline-grid;
|
||||
grid-template-rows: masonry;
|
||||
grid-template-columns: 30px;
|
||||
gap: 1px 2px;
|
||||
padding: 2px 3px 1px 1px;
|
||||
border-style: solid;
|
||||
border-width: 1px 7px 3px 5px;
|
||||
border-inline-start-color: magenta;
|
||||
border-block-start-color: blue;
|
||||
background: lightgrey content-box;
|
||||
align-tracks: stretch;
|
||||
block-size: 25px;
|
||||
vertical-align: top;
|
||||
}
|
||||
item {
|
||||
border-inline-start: 1px solid magenta;
|
||||
border-block-start: 2px solid blue;
|
||||
}
|
||||
item:nth-child(2n+1) { background: grey; }
|
||||
item:nth-child(2n) { background: cyan; }
|
||||
.hl { writing-mode: horizontal-tb; direction:ltr; }
|
||||
.hr { writing-mode: horizontal-tb; direction:rtl; }
|
||||
.vll { writing-mode: vertical-lr; direction:ltr; }
|
||||
.vlr { writing-mode: vertical-lr; direction:rtl; }
|
||||
.vrl { writing-mode: vertical-rl; direction:ltr; }
|
||||
.vrr { writing-mode: vertical-rl; direction:rtl; }
|
||||
.swl { writing-mode: sideways-lr; direction:ltr; }
|
||||
.swr { writing-mode: sideways-lr; direction:rtl; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div style="display:none">
|
||||
<grid>
|
||||
<item>1</item>
|
||||
<item>2a<br>2b</item>
|
||||
</grid>
|
||||
</div>
|
||||
<script>
|
||||
let wms = [ "hl", "hr", "vll", "vrr", "vlr", "vrl", "swl", "swr", ];
|
||||
let grid = document.getElementsByTagName('grid')[0];
|
||||
for (const reorder of [false, true]) {
|
||||
for (const cb_wm of wms) {
|
||||
for (const child_wm of wms) {
|
||||
let e = grid.cloneNode(true);
|
||||
e.className = cb_wm;
|
||||
e.children[1].className = child_wm;
|
||||
if (reorder) {
|
||||
e.children[0].style.order = '1';
|
||||
}
|
||||
document.body.appendChild(e);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,333 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>Reference: Masonry layout fragmentation</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
wrapper {
|
||||
display: block;
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.columns {
|
||||
width: 330px;
|
||||
columns: 6;
|
||||
column-fill: auto;
|
||||
column-gap: 1px;
|
||||
background-color: rgba(80,80,80,.2);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.columns:nth-child(2n) {
|
||||
background-color: rgba(10,100,10,.5);
|
||||
}
|
||||
.grid {
|
||||
display: flow-root;
|
||||
border: 1px solid;
|
||||
gap: 2px;
|
||||
}
|
||||
.first { border-bottom-width:0; height:calc(100% - 1px); }
|
||||
.middle { border-top-width:0; border-bottom-width:0; height:100%; }
|
||||
.last { border-top-width:0; }
|
||||
x {
|
||||
background: cyan;
|
||||
height: 5px;
|
||||
}
|
||||
y {
|
||||
background: blue;
|
||||
height: 10px;
|
||||
}
|
||||
z {
|
||||
background: pink;
|
||||
height: 12px;
|
||||
}
|
||||
masonry-track {
|
||||
float: left;
|
||||
height: 100%;
|
||||
gap: 2px;
|
||||
}
|
||||
x,y,z,masonry-track { display: block; }
|
||||
masonry-track > * { margin-bottom:2px; }
|
||||
masonry-track.last > :last-child { margin-bottom:0; }
|
||||
masonry-track:nth-child(1) { width: 10px; }
|
||||
masonry-track:nth-child(2) { width: 15px; margin-left:2px; }
|
||||
masonry-track:nth-child(3) { width: 20px; margin-left:2px; }
|
||||
</style></head>
|
||||
<body>
|
||||
<wrapper>
|
||||
<div class="columns">
|
||||
<div class="grid first">
|
||||
<masonry-track><x></x><y></y><y></y><y></y><x></x><x></x><x></x><x></x></masonry-track>
|
||||
<masonry-track><x></x><z></z><x></x><x></x><x></x><z></z><z></z></masonry-track>
|
||||
<masonry-track><x></x><x></x><x></x><z></z><x></x><y></y><x></x><x></x><y style="height:9px"></y></masonry-track>
|
||||
</div>
|
||||
<div class="grid last" style="height:1px">
|
||||
<masonry-track></masonry-track>
|
||||
<masonry-track></masonry-track>
|
||||
<masonry-track><y style="height:1px"></y></masonry-track>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="grid first">
|
||||
<masonry-track><x></x><y></y><y></y><y></y><x></x><x></x><x></x></masonry-track>
|
||||
<masonry-track><x></x><z></z><x></x><x></x><x></x><z></z></masonry-track>
|
||||
<masonry-track><x></x><x></x><x></x><z></z><x></x><y></y><x></x><x></x></masonry-track>
|
||||
</div>
|
||||
<div class="grid last" style="height:12px">
|
||||
<masonry-track><z></z></masonry-track>
|
||||
<masonry-track><x></x></masonry-track>
|
||||
<masonry-track><y></y></masonry-track>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="grid first">
|
||||
<masonry-track><x></x><y></y><y></y><y></y><x></x><x></x></masonry-track>
|
||||
<masonry-track><x></x><z></z><x></x><x></x><x></x><z></z></masonry-track>
|
||||
<masonry-track><x></x><x></x><x></x><z></z><x></x><y></y></masonry-track>
|
||||
</div>
|
||||
<div class="grid last" style="height:24px">
|
||||
<masonry-track><x></x><x></x><y></y></masonry-track>
|
||||
<masonry-track><z></z></masonry-track>
|
||||
<masonry-track><x></x><x></x></masonry-track>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="grid first">
|
||||
<masonry-track><x></x><y></y><y></y><y></y></masonry-track>
|
||||
<masonry-track><x></x><z></z><x></x><x></x><x></x></masonry-track>
|
||||
<masonry-track><x></x><x></x><x></x><z></z><x></x><y style="height:5px;"></y></masonry-track>
|
||||
</div>
|
||||
<div class="grid last" style="height:31px">
|
||||
<masonry-track><z></z><z></z></masonry-track>
|
||||
<masonry-track><x></x><x></x><x></x><x></x></masonry-track>
|
||||
<masonry-track><y style="height:5px"></y><x></x><x></x><y></y></masonry-track>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="grid first">
|
||||
<masonry-track><x></x><y></y><y></y><y style="height:6px;"></y></masonry-track>
|
||||
<masonry-track><x></x><z></z><x></x><x></x></masonry-track>
|
||||
<masonry-track><x></x><x></x><x></x><z></z></masonry-track>
|
||||
</div>
|
||||
<div class="grid middle">
|
||||
<masonry-track><y style="height:4px;"></y><z></z><z></z></masonry-track>
|
||||
<masonry-track><x></x><y></y><x></x><x></x><y style="height:5px;"></y></masonry-track>
|
||||
<masonry-track><x></x><x></x><x></x><x></x><x></x></masonry-track>
|
||||
</div>
|
||||
<div class="grid last" style="height:5px">
|
||||
<masonry-track></masonry-track>
|
||||
<masonry-track><y style="height:5px;"></y></masonry-track>
|
||||
<masonry-track></masonry-track>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="grid first">
|
||||
<masonry-track><x></x><y></y><y style="height:8px;"></y></masonry-track>
|
||||
<masonry-track><x></x><z></z><x></x></masonry-track>
|
||||
<masonry-track><x></x><x></x><x></x></masonry-track>
|
||||
</div>
|
||||
<div class="grid middle">
|
||||
<masonry-track><y style="height:2px;"></y><y></y><y></y></masonry-track>
|
||||
<masonry-track><z></z><x></x><x></x></masonry-track>
|
||||
<masonry-track><x></x><x></x><z></z></masonry-track>
|
||||
</div>
|
||||
<div class="grid last" style="height:24px">
|
||||
<masonry-track><x></x><x></x><x></x></masonry-track>
|
||||
<masonry-track><x></x><x></x><y></y></masonry-track>
|
||||
<masonry-track><z></z></masonry-track>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="grid first">
|
||||
<masonry-track><x></x><y></y></masonry-track>
|
||||
<masonry-track><x></x></masonry-track>
|
||||
<masonry-track><x></x><x></x></masonry-track>
|
||||
</div>
|
||||
<div class="grid middle">
|
||||
<masonry-track><z></z></masonry-track>
|
||||
<masonry-track><x></x><x></x><y style="height:4px;"></y></masonry-track>
|
||||
<masonry-track><y></y></masonry-track>
|
||||
</div>
|
||||
<div class="grid middle">
|
||||
<masonry-track><z></z></masonry-track>
|
||||
<masonry-track><y style="height:6px;"></y><x></x></masonry-track>
|
||||
<masonry-track><x></x><x></x><y style="height:4px;"></y></masonry-track>
|
||||
</div>
|
||||
<div class="grid middle">
|
||||
<masonry-track><z></z></masonry-track>
|
||||
<masonry-track><x></x><x></x></masonry-track>
|
||||
<masonry-track><y style="height:6px;"></y><x></x></masonry-track>
|
||||
</div>
|
||||
<div class="grid last">
|
||||
<masonry-track><z></z></masonry-track>
|
||||
<masonry-track><x></x><x></x></masonry-track>
|
||||
<masonry-track><x></x><y></y></masonry-track>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="grid first">
|
||||
<masonry-track><x></x><y style="height:4px;"></masonry-track>
|
||||
<masonry-track><x></x></masonry-track>
|
||||
<masonry-track><x></x></masonry-track>
|
||||
</div>
|
||||
<div class="grid middle">
|
||||
<masonry-track><y style="height:6px;"></y><y style="height:4px;"></y></masonry-track>
|
||||
<masonry-track><z style="height:12px;"></z></masonry-track>
|
||||
<masonry-track><x></x><x></x></masonry-track>
|
||||
</div>
|
||||
<div class="grid middle">
|
||||
<masonry-track><y style="height:6px;"></y><y style="height:4px;"></y></masonry-track>
|
||||
<masonry-track><x></x><x></x></masonry-track>
|
||||
<masonry-track><z style="height:12px;"></z></masonry-track>
|
||||
</div>
|
||||
<div class="grid middle">
|
||||
<masonry-track><y style="height:6px;"></y></masonry-track>
|
||||
<masonry-track><x></x></masonry-track>
|
||||
<masonry-track><x></x><y style="height:5px;"></y></masonry-track>
|
||||
</div>
|
||||
<div class="grid middle">
|
||||
<masonry-track><z style="height:12px;"></z></masonry-track>
|
||||
<masonry-track><x></x><x></x></masonry-track>
|
||||
<masonry-track><y style="height:5px;"></y><x></x></masonry-track>
|
||||
</div>
|
||||
<div class="grid middle">
|
||||
<masonry-track><z style="height:12px;"></z></masonry-track>
|
||||
<masonry-track><x></x><x></x></masonry-track>
|
||||
<masonry-track><x></x><y style="height:5px;"></y></masonry-track>
|
||||
</div>
|
||||
<div class="grid last" style="height:5px;">
|
||||
<masonry-track></masonry-track>
|
||||
<masonry-track></masonry-track>
|
||||
<masonry-track><y style="height:5px;"></y></masonry-track>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="grid first">
|
||||
<masonry-track><x></x><y style="height:3px;"></masonry-track>
|
||||
<masonry-track><x></x></masonry-track>
|
||||
<masonry-track><x></x></masonry-track>
|
||||
</div>
|
||||
<div class="grid middle">
|
||||
<masonry-track><y style="height:7px;"></y><y style="height:3px;"></y></masonry-track>
|
||||
<masonry-track><z style="height:11px;"></z></masonry-track>
|
||||
<masonry-track><x></x></masonry-track>
|
||||
</div>
|
||||
<div class="grid middle">
|
||||
<masonry-track><y style="height:8px;"></y></masonry-track>
|
||||
<masonry-track><z style="height:1px;"></z><x></x><y style="height:1px;"></y></masonry-track>
|
||||
<masonry-track><x></x></masonry-track>
|
||||
</div>
|
||||
<div class="grid middle">
|
||||
<masonry-track><z style="height:11px;"></z></masonry-track>
|
||||
<masonry-track><y style="height:9px;"></y></masonry-track>
|
||||
<masonry-track><x></x></masonry-track>
|
||||
</div>
|
||||
<div class="grid middle">
|
||||
<masonry-track><z style="height:1px;"></z></masonry-track>
|
||||
<masonry-track><x></x><y style="height:4px;"></y></masonry-track>
|
||||
<masonry-track><x></x></masonry-track>
|
||||
</div>
|
||||
<div class="grid middle">
|
||||
<masonry-track><z style="height:11px;"></z></masonry-track>
|
||||
<masonry-track><y style="height:6px;"></y></masonry-track>
|
||||
<masonry-track><x></x></masonry-track>
|
||||
</div>
|
||||
<div class="grid middle">
|
||||
<masonry-track><z style="height:1px;"></z></masonry-track>
|
||||
<masonry-track><x></x></masonry-track>
|
||||
<masonry-track><x></x></masonry-track>
|
||||
</div>
|
||||
<div class="grid middle">
|
||||
<masonry-track><z style="height:11px;"></z></masonry-track>
|
||||
<masonry-track><x></x></masonry-track>
|
||||
<masonry-track><x></x><y style="height:4px;"></y></masonry-track>
|
||||
</div>
|
||||
<div class="grid last" style="height:6px;">
|
||||
<masonry-track><z style="height:1px;"></z></masonry-track>
|
||||
<masonry-track><x></x></masonry-track>
|
||||
<masonry-track><y style="height:6px;"></y></masonry-track>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="grid first">
|
||||
<masonry-track><x></x></masonry-track>
|
||||
<masonry-track><x></x></masonry-track>
|
||||
<masonry-track><x></x></masonry-track>
|
||||
</div>
|
||||
<div class="grid middle">
|
||||
<masonry-track><y style="height:8px;"></y></masonry-track>
|
||||
<masonry-track><z style="height:8px;"></z></masonry-track>
|
||||
<masonry-track><x></x></masonry-track>
|
||||
</div>
|
||||
<div class="grid middle">
|
||||
<masonry-track><y style="height:2px;"></y><y style="height:4px;"></y></masonry-track>
|
||||
<masonry-track><z style="height:4px;"></z></masonry-track>
|
||||
<masonry-track><x></x></masonry-track>
|
||||
</div>
|
||||
<div class="grid middle">
|
||||
<masonry-track><y style="height:6px;"></y></masonry-track>
|
||||
<masonry-track><x></x></masonry-track>
|
||||
<masonry-track><z style="height:8px;"></z></masonry-track>
|
||||
</div>
|
||||
<div class="grid middle">
|
||||
<masonry-track><x></x></masonry-track>
|
||||
<masonry-track><y style="height:8px;"></y></masonry-track>
|
||||
<masonry-track><z style="height:4px;"></z></masonry-track>
|
||||
</div>
|
||||
<div class="grid middle">
|
||||
<masonry-track><x></x><y style="height:1px;"></y></masonry-track>
|
||||
<masonry-track><y style="height:2px;"></y></masonry-track>
|
||||
<masonry-track><x></x></masonry-track>
|
||||
</div>
|
||||
<div class="grid middle">
|
||||
<masonry-track><y style="height:8px;"></y></masonry-track>
|
||||
<masonry-track><z style="height:8px;"></z></masonry-track>
|
||||
<masonry-track><x></x></masonry-track>
|
||||
</div>
|
||||
<div class="grid middle">
|
||||
<masonry-track><y style="height:1px;"></y><x></x></masonry-track>
|
||||
<masonry-track><z style="height:4px;"></z></masonry-track>
|
||||
<masonry-track><x></x></masonry-track>
|
||||
</div>
|
||||
<div class="grid middle">
|
||||
<masonry-track><z style="height:8px;"></z></masonry-track>
|
||||
<masonry-track><x></x></masonry-track>
|
||||
<masonry-track><x></x><y style="height:1px;"></y></masonry-track>
|
||||
</div>
|
||||
<div class="grid middle">
|
||||
<masonry-track><z style="height:4px;"></z></masonry-track>
|
||||
<masonry-track><x></x></masonry-track>
|
||||
<masonry-track><y style="height:8px;"></y></masonry-track>
|
||||
</div>
|
||||
<div class="grid last" style="height:1px;">
|
||||
<masonry-track></masonry-track>
|
||||
<masonry-track></masonry-track>
|
||||
<masonry-track><y style="height:1px;"></y></masonry-track>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
let elts = document.querySelectorAll(".columns");
|
||||
let heights = [ 78, 68, 58, 48, 38, 28, 18, 12, 11, 8 ];
|
||||
for (let i = 0; i < heights.length; ++i) {
|
||||
elts[i].style.height = heights[i] + "px";
|
||||
}
|
||||
</script>
|
||||
</wrapper>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,79 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Test: Masonry layout fragmentation</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-2">
|
||||
<link rel="match" href="masonry-fragmentation-001-ref.html">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
wrapper {
|
||||
display: block;
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.columns {
|
||||
width: 330px;
|
||||
columns: 6;
|
||||
column-fill: auto;
|
||||
column-gap: 1px;
|
||||
background-color: rgba(80,80,80,.2);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.columns:nth-child(2n) {
|
||||
background-color: rgba(10,100,10,.5);
|
||||
}
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: 10px 15px 20px;
|
||||
grid-template-rows: masonry;
|
||||
border: 1px solid;
|
||||
gap: 2px;
|
||||
}
|
||||
x {
|
||||
background: cyan;
|
||||
height: 5px;
|
||||
break-inside: avoid;
|
||||
}
|
||||
x:nth-child(4n) {
|
||||
background: blue;
|
||||
height: 10px;
|
||||
break-inside: auto;
|
||||
}
|
||||
x:nth-child(5n) {
|
||||
background: pink;
|
||||
height: 12px;
|
||||
break-inside: avoid;
|
||||
}
|
||||
</style></head>
|
||||
<body>
|
||||
<wrapper style="display:none">
|
||||
<div style="display:none">
|
||||
<div class="columns">
|
||||
<div class="grid">
|
||||
<x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x>
|
||||
<x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
let wrapper = document.querySelectorAll("wrapper")[0];
|
||||
let tmplt = document.querySelectorAll(".columns")[0];
|
||||
let heights = [ 78, 68, 58, 48, 38, 28, 18, 12, 11, 8 ];
|
||||
for (let h of heights) {
|
||||
let e = tmplt.cloneNode(true);
|
||||
e.style.height = h + "px";
|
||||
wrapper.appendChild(e);
|
||||
}
|
||||
wrapper.style.display="";
|
||||
</script>
|
||||
</wrapper>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,132 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>Reference: Masonry layout fragmentation</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
wrapper {
|
||||
display: block;
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.columns {
|
||||
width: 330px;
|
||||
columns: 6;
|
||||
column-fill: auto;
|
||||
column-gap: 1px;
|
||||
background-color: rgba(80,80,80,.2);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.columns:nth-child(2n) {
|
||||
background-color: rgba(10,100,10,.5);
|
||||
}
|
||||
.grid {
|
||||
display: flow-root;
|
||||
border: 1px solid;
|
||||
gap: 2px;
|
||||
}
|
||||
.first { border-bottom-width:0; height:calc(100% - 1px); }
|
||||
.middle { border-top-width:0; border-bottom-width:0; height:100%; }
|
||||
.last { border-top-width:0; }
|
||||
x {
|
||||
background: cyan;
|
||||
height: 5px;
|
||||
}
|
||||
y {
|
||||
background: blue;
|
||||
height: 10px;
|
||||
}
|
||||
.c1 { width: 27px; }
|
||||
.c2 { width: 37px; }
|
||||
s { height: 10px; }
|
||||
z {
|
||||
background: pink;
|
||||
height: 12px;
|
||||
}
|
||||
masonry-track {
|
||||
float: left;
|
||||
height: 100%;
|
||||
gap: 2px;
|
||||
}
|
||||
x,y,s,z,masonry-track { display: block; }
|
||||
masonry-track > * { margin-bottom:2px; }
|
||||
masonry-track.last > :last-child { margin-bottom:0; }
|
||||
masonry-track:nth-child(1) { width: 10px; }
|
||||
masonry-track:nth-child(2) { width: 15px; margin-left:2px; }
|
||||
masonry-track:nth-child(3) { width: 20px; margin-left:2px; }
|
||||
</style></head>
|
||||
<body>
|
||||
<wrapper>
|
||||
<div class="columns">
|
||||
<div class="grid first">
|
||||
<masonry-track><x></x><y class="c1"></y><x></x><y class="c1"></y><x></x></masonry-track>
|
||||
<masonry-track><x></x><s></s><x></x><s style="margin-bottom:6px"></s><y class="c2" style="height:5px"></y></masonry-track>
|
||||
<masonry-track><x></x><z></z><x></x><z></z></masonry-track>
|
||||
</div>
|
||||
<div class="grid middle">
|
||||
<masonry-track><x></x><x></x><s style="height:5px"></s><y class="c1"></y><z class="c1"></z><y class="c1" style="height:1px"></y></masonry-track>
|
||||
<masonry-track><y class="c2" style="height:5px"></y><z></z></masonry-track>
|
||||
<masonry-track><s style="height:5px"></s><x></x><x></x><x></x><x></x><x></x><x></x></masonry-track>
|
||||
</div>
|
||||
<div class="grid last" style="height:9px">
|
||||
<masonry-track><y style="height:9px" class="c1"></y></masonry-track>
|
||||
<masonry-track></masonry-track>
|
||||
<masonry-track></masonry-track>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="grid first">
|
||||
<masonry-track><x></x><y class="c1"></masonry-track>
|
||||
<masonry-track><x></x></masonry-track>
|
||||
<masonry-track><x></x></masonry-track>
|
||||
</div>
|
||||
<div class="grid middle">
|
||||
<masonry-track><z></z></masonry-track>
|
||||
<masonry-track><x></x><y class="c2"></y></masonry-track>
|
||||
<masonry-track><x></x></masonry-track>
|
||||
</div>
|
||||
<div class="grid middle">
|
||||
<masonry-track><x></x><s style="height:5px"></s><y style="height:4px" class="c1"></y></masonry-track>
|
||||
<masonry-track><z></z></masonry-track>
|
||||
<masonry-track><x></x><x></x></masonry-track>
|
||||
</div>
|
||||
<div class="grid middle">
|
||||
<masonry-track><y style="height:6px" class="c1"></y><y class="c1"></y></masonry-track>
|
||||
<masonry-track></masonry-track>
|
||||
<masonry-track><x></x></masonry-track>
|
||||
</div>
|
||||
<div class="grid middle">
|
||||
<masonry-track><z></z></masonry-track>
|
||||
<masonry-track><x></x><x></x></masonry-track>
|
||||
<masonry-track><x></x><x></x></masonry-track>
|
||||
</div>
|
||||
<div class="grid middle">
|
||||
<masonry-track><z class="c1"></z><y style="height:4px" class="c1"></y></masonry-track>
|
||||
<masonry-track></masonry-track>
|
||||
<masonry-track><x></x><x></x></masonry-track>
|
||||
</div>
|
||||
<div class="grid last" style="height:6px;">
|
||||
<masonry-track><y style="height:6px" class="c1"></y></masonry-track>
|
||||
<masonry-track></masonry-track>
|
||||
<masonry-track></masonry-track>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
let elts = document.querySelectorAll(".columns");
|
||||
let heights = [ 48, 18 ];
|
||||
for (let i = 0; i < heights.length; ++i) {
|
||||
elts[i].style.height = heights[i] + "px";
|
||||
}
|
||||
</script>
|
||||
</wrapper>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,80 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Test: Masonry layout fragmentation</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-2">
|
||||
<link rel="match" href="masonry-fragmentation-002-ref.html">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
wrapper {
|
||||
display: block;
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.columns {
|
||||
width: 330px;
|
||||
columns: 6;
|
||||
column-fill: auto;
|
||||
column-gap: 1px;
|
||||
background-color: rgba(80,80,80,.2);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.columns:nth-child(2n) {
|
||||
background-color: rgba(10,100,10,.5);
|
||||
}
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: 10px 15px 20px;
|
||||
grid-template-rows: masonry;
|
||||
border: 1px solid;
|
||||
gap: 2px;
|
||||
}
|
||||
x {
|
||||
background: cyan;
|
||||
height: 5px;
|
||||
break-inside: avoid;
|
||||
}
|
||||
x:nth-child(4n) {
|
||||
grid-column: span 2;
|
||||
background: blue;
|
||||
height: 10px;
|
||||
break-inside: auto;
|
||||
}
|
||||
x:nth-child(5n) {
|
||||
background: pink;
|
||||
height: 12px;
|
||||
break-inside: avoid;
|
||||
}
|
||||
</style></head>
|
||||
<body>
|
||||
<wrapper style="display:none">
|
||||
<div style="display:none">
|
||||
<div class="columns">
|
||||
<div class="grid">
|
||||
<x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x>
|
||||
<x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
let wrapper = document.querySelectorAll("wrapper")[0];
|
||||
let tmplt = document.querySelectorAll(".columns")[0];
|
||||
let heights = [ 48, 18 ];
|
||||
for (let h of heights) {
|
||||
let e = tmplt.cloneNode(true);
|
||||
e.style.height = h + "px";
|
||||
wrapper.appendChild(e);
|
||||
}
|
||||
wrapper.style.display="";
|
||||
</script>
|
||||
</wrapper>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,114 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>Reference: Grid axis fragmentation with column masonry layout</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
wrapper {
|
||||
display: block;
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.columns {
|
||||
columns: 3;
|
||||
column-fill: auto;
|
||||
background: lightgrey;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid: 20px auto 30px / auto;
|
||||
border: solid;
|
||||
border-width: 3px 1px 7px 5px;
|
||||
padding: 1px 3px 5px 7px;
|
||||
gap: 1px 5px;
|
||||
}
|
||||
|
||||
x {
|
||||
background: cyan;
|
||||
min-width: 20px;
|
||||
min-height: 10px;
|
||||
}
|
||||
y {
|
||||
background: blue;
|
||||
width: 35px;
|
||||
}
|
||||
z {
|
||||
background: gray;
|
||||
width: 40px;
|
||||
}
|
||||
masonry-track {
|
||||
display: grid;
|
||||
justify-content: start;
|
||||
column-gap: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<wrapper style="display:none">
|
||||
<div class="columns" style="height:90px">
|
||||
<div class="grid">
|
||||
<masonry-track><x></x><y></y><y></y><x></x></masonry-track>
|
||||
<masonry-track><x></x><x></x><x></x><z></z></masonry-track>
|
||||
<masonry-track><z></z><z></z><x></x><z></z></masonry-track>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns" style="height:68px">
|
||||
<div class="grid">
|
||||
<masonry-track><x></x><y></y><y></y><x></x></masonry-track>
|
||||
<masonry-track><x></x><x></x><x></x><z></z></masonry-track>
|
||||
<masonry-track><z></z><z></z><x></x><z></z></masonry-track>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns" style="height:48px">
|
||||
<div class="grid">
|
||||
<masonry-track><x></x><y></y><y></y><x></x></masonry-track>
|
||||
<masonry-track><x></x><x></x><x></x><z></z></masonry-track>
|
||||
<masonry-track><z></z><z></z><x></x><z></z></masonry-track>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns" style="height:38px">
|
||||
<div class="grid">
|
||||
<masonry-track><x></x><y></y><y></y><x></x></masonry-track>
|
||||
<masonry-track><x></x><x></x><x></x><z></z></masonry-track>
|
||||
<masonry-track><z></z><z></z><x></x><z></z></masonry-track>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns" style="height:28px">
|
||||
<div class="grid">
|
||||
<masonry-track><x></x><y></y><y></y><x></x></masonry-track>
|
||||
<masonry-track><x></x><x></x><x></x><z></z></masonry-track>
|
||||
<masonry-track><z></z><z></z><x></x><z></z></masonry-track>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns" style="height:18px">
|
||||
<div class="grid">
|
||||
<masonry-track><x></x><y></y><y></y><x></x></masonry-track>
|
||||
<masonry-track><x></x><x></x><x></x><z></z></masonry-track>
|
||||
<masonry-track><z></z><z></z><x></x><z></z></masonry-track>
|
||||
</div>
|
||||
</div>
|
||||
</wrapper>
|
||||
|
||||
<script>
|
||||
let wrapper = document.querySelectorAll("wrapper")[0];
|
||||
let grids = document.querySelectorAll(".grid");
|
||||
for (let e of grids) {
|
||||
for (let track of e.children) {
|
||||
track.style.gridTemplateColumns = "repeat(" + track.children.length + ",auto)";
|
||||
}
|
||||
}
|
||||
wrapper.style.display="";
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Test: Grid axis fragmentation with column masonry layout</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-2">
|
||||
<link rel="match" href="masonry-fragmentation-003-ref.html">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
wrapper {
|
||||
display: block;
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.columns {
|
||||
columns: 3;
|
||||
column-fill: auto;
|
||||
background: lightgrey;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid: 20px auto 30px / masonry;
|
||||
border: solid;
|
||||
border-width: 3px 1px 7px 5px;
|
||||
padding: 1px 3px 5px 7px;
|
||||
gap: 1px 5px;
|
||||
}
|
||||
|
||||
.grid > * {
|
||||
background: cyan;
|
||||
min-width: 20px;
|
||||
min-height: 10px;
|
||||
}
|
||||
.grid > :nth-child(4n) {
|
||||
background: blue;
|
||||
width: 35px;
|
||||
}
|
||||
.grid > :nth-child(3n) {
|
||||
background: gray;
|
||||
width: 40px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<wrapper style="display:none">
|
||||
<div style="display:none">
|
||||
<div class="columns">
|
||||
<div class="grid">
|
||||
<x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
let wrapper = document.querySelectorAll("wrapper")[0];
|
||||
let tmplt = document.querySelectorAll(".columns")[0];
|
||||
let heights = [ 90, 68, 48, 38, 28, 18 ];
|
||||
for (let h of heights) {
|
||||
let e = tmplt.cloneNode(true);
|
||||
e.style.height = h + "px";
|
||||
wrapper.appendChild(e);
|
||||
}
|
||||
wrapper.style.display="";
|
||||
</script>
|
||||
</wrapper>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,114 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>Reference: Grid axis fragmentation with column masonry layout</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
wrapper {
|
||||
display: block;
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.columns {
|
||||
columns: 3;
|
||||
column-fill: auto;
|
||||
background: lightgrey;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid: 20px auto 30px / auto;
|
||||
border: solid;
|
||||
border-width: 3px 1px 7px 5px;
|
||||
padding: 1px 3px 5px 7px;
|
||||
gap: 1px 5px;
|
||||
}
|
||||
|
||||
x {
|
||||
background: cyan;
|
||||
min-width: 20px;
|
||||
min-height: 10px;
|
||||
}
|
||||
y {
|
||||
background: blue;
|
||||
width: 35px;
|
||||
}
|
||||
z {
|
||||
background: gray;
|
||||
width: 40px;
|
||||
}
|
||||
masonry-track {
|
||||
display: grid;
|
||||
justify-content: end;
|
||||
column-gap: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<wrapper style="display:none">
|
||||
<div class="columns" style="height:90px">
|
||||
<div class="grid">
|
||||
<masonry-track><x></x><y></y><y></y><x></x></masonry-track>
|
||||
<masonry-track><x></x><x></x><x></x><z></z></masonry-track>
|
||||
<masonry-track><z></z><z></z><x></x><z></z></masonry-track>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns" style="height:68px">
|
||||
<div class="grid">
|
||||
<masonry-track><x></x><y></y><y></y><x></x></masonry-track>
|
||||
<masonry-track><x></x><x></x><x></x><z></z></masonry-track>
|
||||
<masonry-track><z></z><z></z><x></x><z></z></masonry-track>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns" style="height:48px">
|
||||
<div class="grid">
|
||||
<masonry-track><x></x><y></y><y></y><x></x></masonry-track>
|
||||
<masonry-track><x></x><x></x><x></x><z></z></masonry-track>
|
||||
<masonry-track><z></z><z></z><x></x><z></z></masonry-track>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns" style="height:38px">
|
||||
<div class="grid">
|
||||
<masonry-track><x></x><y></y><y></y><x></x></masonry-track>
|
||||
<masonry-track><x></x><x></x><x></x><z></z></masonry-track>
|
||||
<masonry-track><z></z><z></z><x></x><z></z></masonry-track>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns" style="height:28px">
|
||||
<div class="grid">
|
||||
<masonry-track><x></x><y></y><y></y><x></x></masonry-track>
|
||||
<masonry-track><x></x><x></x><x></x><z></z></masonry-track>
|
||||
<masonry-track><z></z><z></z><x></x><z></z></masonry-track>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns" style="height:18px">
|
||||
<div class="grid">
|
||||
<masonry-track><x></x><y></y><y></y><x></x></masonry-track>
|
||||
<masonry-track><x></x><x></x><x></x><z></z></masonry-track>
|
||||
<masonry-track><z></z><z></z><x></x><z></z></masonry-track>
|
||||
</div>
|
||||
</div>
|
||||
</wrapper>
|
||||
|
||||
<script>
|
||||
let wrapper = document.querySelectorAll("wrapper")[0];
|
||||
let grids = document.querySelectorAll(".grid");
|
||||
for (let e of grids) {
|
||||
for (let track of e.children) {
|
||||
track.style.gridTemplateColumns = "repeat(" + track.children.length + ",auto)";
|
||||
}
|
||||
}
|
||||
wrapper.style.display="";
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Test: Grid axis fragmentation with column masonry layout</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-2">
|
||||
<link rel="match" href="masonry-fragmentation-004-ref.html">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
wrapper {
|
||||
display: block;
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.columns {
|
||||
columns: 3;
|
||||
column-fill: auto;
|
||||
background: lightgrey;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid: 20px auto 30px / masonry;
|
||||
justify-tracks: end;
|
||||
border: solid;
|
||||
border-width: 3px 1px 7px 5px;
|
||||
padding: 1px 3px 5px 7px;
|
||||
gap: 1px 5px;
|
||||
}
|
||||
|
||||
.grid > * {
|
||||
background: cyan;
|
||||
min-width: 20px;
|
||||
min-height: 10px;
|
||||
}
|
||||
.grid > :nth-child(4n) {
|
||||
background: blue;
|
||||
width: 35px;
|
||||
}
|
||||
.grid > :nth-child(3n) {
|
||||
background: gray;
|
||||
width: 40px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<wrapper style="display:none">
|
||||
<div style="display:none">
|
||||
<div class="columns">
|
||||
<div class="grid">
|
||||
<x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
let wrapper = document.querySelectorAll("wrapper")[0];
|
||||
let tmplt = document.querySelectorAll(".columns")[0];
|
||||
let heights = [ 90, 68, 48, 38, 28, 18 ];
|
||||
for (let h of heights) {
|
||||
let e = tmplt.cloneNode(true);
|
||||
e.style.height = h + "px";
|
||||
wrapper.appendChild(e);
|
||||
}
|
||||
wrapper.style.display="";
|
||||
</script>
|
||||
</wrapper>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,114 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>Reference: Grid axis fragmentation with column masonry layout</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
wrapper {
|
||||
display: block;
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.columns {
|
||||
columns: 3;
|
||||
column-fill: auto;
|
||||
background: lightgrey;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid: 20px auto 30px / auto;
|
||||
border: solid;
|
||||
border-width: 3px 1px 7px 5px;
|
||||
padding: 1px 3px 5px 7px;
|
||||
gap: 1px 5px;
|
||||
}
|
||||
|
||||
x {
|
||||
background: cyan;
|
||||
min-width: 20px;
|
||||
min-height: 10px;
|
||||
}
|
||||
y {
|
||||
background: blue;
|
||||
width: 35px;
|
||||
}
|
||||
z {
|
||||
background: gray;
|
||||
width: 40px;
|
||||
}
|
||||
masonry-track {
|
||||
display: grid;
|
||||
justify-content: space-between;
|
||||
column-gap: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<wrapper style="display:none">
|
||||
<div class="columns" style="height:90px">
|
||||
<div class="grid">
|
||||
<masonry-track><x></x><y></y><y></y><x></x></masonry-track>
|
||||
<masonry-track><x></x><x></x><x></x><z></z></masonry-track>
|
||||
<masonry-track><z></z><z></z><x></x><z></z></masonry-track>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns" style="height:68px">
|
||||
<div class="grid">
|
||||
<masonry-track><x></x><y></y><y></y><x></x></masonry-track>
|
||||
<masonry-track><x></x><x></x><x></x><z></z></masonry-track>
|
||||
<masonry-track><z></z><z></z><x></x><z></z></masonry-track>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns" style="height:48px">
|
||||
<div class="grid">
|
||||
<masonry-track><x></x><y></y><y></y><x></x></masonry-track>
|
||||
<masonry-track><x></x><x></x><x></x><z></z></masonry-track>
|
||||
<masonry-track><z></z><z></z><x></x><z></z></masonry-track>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns" style="height:38px">
|
||||
<div class="grid">
|
||||
<masonry-track><x></x><y></y><y></y><x></x></masonry-track>
|
||||
<masonry-track><x></x><x></x><x></x><z></z></masonry-track>
|
||||
<masonry-track><z></z><z></z><x></x><z></z></masonry-track>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns" style="height:28px">
|
||||
<div class="grid">
|
||||
<masonry-track><x></x><y></y><y></y><x></x></masonry-track>
|
||||
<masonry-track><x></x><x></x><x></x><z></z></masonry-track>
|
||||
<masonry-track><z></z><z></z><x></x><z></z></masonry-track>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns" style="height:18px">
|
||||
<div class="grid">
|
||||
<masonry-track><x></x><y></y><y></y><x></x></masonry-track>
|
||||
<masonry-track><x></x><x></x><x></x><z></z></masonry-track>
|
||||
<masonry-track><z></z><z></z><x></x><z></z></masonry-track>
|
||||
</div>
|
||||
</div>
|
||||
</wrapper>
|
||||
|
||||
<script>
|
||||
let wrapper = document.querySelectorAll("wrapper")[0];
|
||||
let grids = document.querySelectorAll(".grid");
|
||||
for (let e of grids) {
|
||||
for (let track of e.children) {
|
||||
track.style.gridTemplateColumns = "repeat(" + track.children.length + ",auto)";
|
||||
}
|
||||
}
|
||||
wrapper.style.display="";
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Test: Grid axis fragmentation with column masonry layout</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-2">
|
||||
<link rel="match" href="masonry-fragmentation-005-ref.html">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
wrapper {
|
||||
display: block;
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.columns {
|
||||
columns: 3;
|
||||
column-fill: auto;
|
||||
background: lightgrey;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid: 20px auto 30px / masonry;
|
||||
justify-tracks: space-between;
|
||||
border: solid;
|
||||
border-width: 3px 1px 7px 5px;
|
||||
padding: 1px 3px 5px 7px;
|
||||
gap: 1px 5px;
|
||||
}
|
||||
|
||||
.grid > * {
|
||||
background: cyan;
|
||||
min-width: 20px;
|
||||
min-height: 10px;
|
||||
}
|
||||
.grid > :nth-child(4n) {
|
||||
background: blue;
|
||||
width: 35px;
|
||||
}
|
||||
.grid > :nth-child(3n) {
|
||||
background: gray;
|
||||
width: 40px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<wrapper style="display:none">
|
||||
<div style="display:none">
|
||||
<div class="columns">
|
||||
<div class="grid">
|
||||
<x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
let wrapper = document.querySelectorAll("wrapper")[0];
|
||||
let tmplt = document.querySelectorAll(".columns")[0];
|
||||
let heights = [ 90, 68, 48, 38, 28, 18 ];
|
||||
for (let h of heights) {
|
||||
let e = tmplt.cloneNode(true);
|
||||
e.style.height = h + "px";
|
||||
wrapper.appendChild(e);
|
||||
}
|
||||
wrapper.style.display="";
|
||||
</script>
|
||||
</wrapper>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,118 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>Reference: Grid axis fragmentation with column masonry layout</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
wrapper {
|
||||
display: block;
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.columns {
|
||||
columns: 3;
|
||||
column-fill: auto;
|
||||
background: lightgrey;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid: 20px auto 30px / auto;
|
||||
border: solid;
|
||||
border-width: 3px 1px 7px 5px;
|
||||
padding: 1px 3px 5px 7px;
|
||||
gap: 1px 5px;
|
||||
}
|
||||
|
||||
x {
|
||||
background: cyan;
|
||||
min-width: 20px;
|
||||
min-height: 10px;
|
||||
}
|
||||
y {
|
||||
background: blue;
|
||||
width: 35px;
|
||||
}
|
||||
z {
|
||||
background: gray;
|
||||
width: 40px;
|
||||
}
|
||||
masonry-track {
|
||||
display: grid;
|
||||
justify-content: stretch;
|
||||
column-gap: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<wrapper style="display:none">
|
||||
<div class="columns" style="height:90px">
|
||||
<div class="grid">
|
||||
<masonry-track><x></x><y></y><y></y><x></x></masonry-track>
|
||||
<masonry-track><x></x><x></x><x></x><z></z></masonry-track>
|
||||
<masonry-track><z></z><z></z><x></x><z></z></masonry-track>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns" style="height:68px">
|
||||
<div class="grid">
|
||||
<masonry-track><x></x><y></y><y></y><x></x></masonry-track>
|
||||
<masonry-track><x></x><x></x><x></x><z></z></masonry-track>
|
||||
<masonry-track><z></z><z></z><x></x><z></z></masonry-track>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns" style="height:48px">
|
||||
<div class="grid">
|
||||
<masonry-track><x></x><y></y><y></y><x></x></masonry-track>
|
||||
<masonry-track><x></x><x></x><x></x><z></z></masonry-track>
|
||||
<masonry-track><z></z><z></z><x></x><z></z></masonry-track>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns" style="height:38px">
|
||||
<div class="grid">
|
||||
<masonry-track><x></x><y></y><y></y><x></x></masonry-track>
|
||||
<masonry-track><x></x><x></x><x></x><z></z></masonry-track>
|
||||
<masonry-track><z></z><z></z><x></x><z></z></masonry-track>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns" style="height:28px">
|
||||
<div class="grid">
|
||||
<masonry-track><x></x><y></y><y></y><x></x></masonry-track>
|
||||
<masonry-track><x></x><x></x><x></x><z></z></masonry-track>
|
||||
<masonry-track><z></z><z></z><x></x><z></z></masonry-track>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns" style="height:18px">
|
||||
<div class="grid">
|
||||
<masonry-track><x></x><y></y><y></y><x></x></masonry-track>
|
||||
<masonry-track><x></x><x></x><x></x><z></z></masonry-track>
|
||||
<masonry-track><z></z><z></z><x></x><z></z></masonry-track>
|
||||
</div>
|
||||
</div>
|
||||
</wrapper>
|
||||
|
||||
<script>
|
||||
let wrapper = document.querySelectorAll("wrapper")[0];
|
||||
let grids = document.querySelectorAll(".grid");
|
||||
for (let e of grids) {
|
||||
for (let track of e.children) {
|
||||
var cols = "";
|
||||
for (let item of track.children) {
|
||||
if (item.tagName != "X") cols += "min-content "; else cols += "auto ";
|
||||
}
|
||||
track.style.gridTemplateColumns = cols;
|
||||
}
|
||||
}
|
||||
wrapper.style.display="";
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Test: Grid axis fragmentation with column masonry layout</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-2">
|
||||
<link rel="match" href="masonry-fragmentation-006-ref.html">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
wrapper {
|
||||
display: block;
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.columns {
|
||||
columns: 3;
|
||||
column-fill: auto;
|
||||
background: lightgrey;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid: 20px auto 30px / masonry;
|
||||
justify-tracks: stretch;
|
||||
border: solid;
|
||||
border-width: 3px 1px 7px 5px;
|
||||
padding: 1px 3px 5px 7px;
|
||||
gap: 1px 5px;
|
||||
}
|
||||
|
||||
.grid > * {
|
||||
background: cyan;
|
||||
min-width: 20px;
|
||||
min-height: 10px;
|
||||
}
|
||||
.grid > :nth-child(4n) {
|
||||
background: blue;
|
||||
width: 35px;
|
||||
}
|
||||
.grid > :nth-child(3n) {
|
||||
background: gray;
|
||||
width: 40px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<wrapper style="display:none">
|
||||
<div style="display:none">
|
||||
<div class="columns">
|
||||
<div class="grid">
|
||||
<x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
let wrapper = document.querySelectorAll("wrapper")[0];
|
||||
let tmplt = document.querySelectorAll(".columns")[0];
|
||||
let heights = [ 90, 68, 48, 38, 28, 18 ];
|
||||
for (let h of heights) {
|
||||
let e = tmplt.cloneNode(true);
|
||||
e.style.height = h + "px";
|
||||
wrapper.appendChild(e);
|
||||
}
|
||||
wrapper.style.display="";
|
||||
</script>
|
||||
</wrapper>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>Reference: Masonry layout with definite `gap` in both axes</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:25px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
|
||||
grid {
|
||||
display: inline-grid;
|
||||
gap: 10px 20px;
|
||||
grid-template-columns: auto min-content repeat(2,auto);
|
||||
color: #444;
|
||||
border: 1px solid;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
item {
|
||||
background-color: #444;
|
||||
color: #fff;
|
||||
padding: 20px;
|
||||
margin: 3px;
|
||||
border: 5px solid blue;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<grid>
|
||||
<item>1</item>
|
||||
<item style="padding:0; place-self:start; min-width:0">2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item style="order:1; width:0; margin-right:-23px; margin-top:-37px; align-self:start">5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Test: Masonry layout with definite `gap` in both axes</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-2">
|
||||
<link rel="match" href="masonry-gap-001-ref.html">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:25px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
|
||||
grid {
|
||||
display: inline-grid;
|
||||
gap: 10px 20px;
|
||||
grid-template-columns: repeat(4,auto);
|
||||
grid-template-rows: masonry;
|
||||
color: #444;
|
||||
border: 1px solid;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
item {
|
||||
background-color: #444;
|
||||
color: #fff;
|
||||
padding: 20px;
|
||||
margin: 3px;
|
||||
border: 5px solid blue;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<grid>
|
||||
<item>1</item>
|
||||
<item style="padding:0">2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
|
@ -0,0 +1,88 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>Reference: align-content:baseline/last baseline</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:15px/1 Ahem; padding:0; margin:0;
|
||||
}
|
||||
|
||||
.grid {
|
||||
float: left;
|
||||
display: grid;
|
||||
grid: auto / repeat(4, auto);
|
||||
border: 2px solid;
|
||||
padding: 1px;
|
||||
margin: 1px;
|
||||
}
|
||||
.c {
|
||||
grid: repeat(4, auto) / auto;
|
||||
}
|
||||
|
||||
span {
|
||||
background: lime;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
span:nth-child(1) { font-size:15px; }
|
||||
span:nth-child(2) { font-size:30px; }
|
||||
span:nth-child(3) { font-size:10px; }
|
||||
.pbs { padding-block-start: 15px; margin-block-start: 5px; }
|
||||
.pbe { padding-block-end: 7px; margin-block-end: 3px; }
|
||||
|
||||
.fb { align-content:baseline; align-self:self-start; justify-self:self-start; }
|
||||
.lb { align-content:last baseline; align-self:self-end; justify-self:self-end; }
|
||||
|
||||
.hl { writing-mode: horizontal-tb; direction:ltr; }
|
||||
.hr { writing-mode: horizontal-tb; direction:rtl; }
|
||||
.vl { writing-mode: vertical-lr; text-orientation: sideways; }
|
||||
.vr { writing-mode: vertical-rl; text-orientation: sideways; }
|
||||
.vlr { writing-mode: vertical-lr; direction:rtl; text-orientation: sideways; }
|
||||
.vrl { writing-mode: vertical-rl; direction:ltr; text-orientation: sideways; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="grid hl"><span class="fb">A<br>B</span><span class="fb">M<br>N</span><span class="fb">X<br>Z</span></div>
|
||||
<div class="grid hl"><span class="fb pbe">A<br>B</span><span class="fb">M<br>N</span><span class="fb">X<br>Z</span></div>
|
||||
<div class="grid vl"><span class="fb">A<br>B</span><span class="fb">M<br>N</span><span class="fb">X<br>Z</span></div>
|
||||
<div class="grid vl"><span class="fb pbs">A<br>B</span><span class="fb">M<br>N</span><span class="fb">X<br>Z</span></div>
|
||||
<div class="grid vr"><span class="fb">A<br>B</span><span class="fb">M<br>N</span><span class="fb">X<br>Z</span></div>
|
||||
<div class="grid vr"><span class="fb pbe">A<br>B</span><span class="fb">M<br>N</span><span class="fb">X<br>Z</span></div>
|
||||
|
||||
<br clear="all">
|
||||
|
||||
<div class="grid hl"><span class="fb" style="padding-top:27px">A<br>B</span><span class="lb">M<br>N</span></div>
|
||||
<div class="grid hl"><span class="fb pbe" style="padding-top:27px">A<br>B</span><span class="lb" style="margin-bottom:7px">M<br>N</span></div>
|
||||
<div class="grid vl"><span class="fb" style="padding-left:18px">A<br>B</span><span class="lb">M<br>N</span></div>
|
||||
<div class="grid vl"><span class="fb pbs">A<br>B</span><span class="lb" style="padding-left:2px">M<br>N</span></div>
|
||||
<div class="grid vr"><span class="fb" style="padding-right:27px">A<br>B</span><span class="lb">M<br>N</span></div>
|
||||
<div class="grid vr"><span class="fb pbe" style="padding-right:27px">A<br>B</span><span class="lb" style="margin-left:7px">M<br>N</span></div>
|
||||
|
||||
<br clear="all">
|
||||
|
||||
<div class="grid c hl"><span class="fb vl">A<br>B</span><span class="fb vl">M<br>N</span><span class="fb vl">X<br>Z</span></div>
|
||||
<div class="grid c hl"><span class="fb vl pbe">A<br>B</span><span class="fb vl">M<br>N</span><span class="fb vl">X<br>Z</span></div>
|
||||
<div class="grid c vl"><span class="fb hl">A<br>B</span><span class="fb hl">M<br>N</span><span class="fb hl">X<br>Z</span></div>
|
||||
<div class="grid c vl" style="inline-size:100px"><span class="fb hl pbs">A<br>B</span><span class="fb hl">M<br>N</span><span class="fb hl">X<br>Z</span></div>
|
||||
<div class="grid c vr"><span class="fb hl">A<br>B</span><span class="fb hl">M<br>N</span><span class="fb hl">X<br>Z</span></div>
|
||||
<div class="grid c vr"><span class="fb hl pbe">A<br>B</span><span class="fb hl">M<br>N</span><span class="fb hl">X<br>Z</span></div>
|
||||
|
||||
<br clear="all">
|
||||
|
||||
<div class="grid c hl"><span class="fb vl" style="padding-left:18px">A<br>B</span><span class="vl">M<br>N</span></div>
|
||||
<div class="grid c hl"><span class="fb vl pbe" style="padding-left:18px">A<br>B</span><span class="vl">M<br>N</span></div>
|
||||
<div class="grid c vl"><span class="fb hl" style="padding-top:27px">A<br>B</span><span class="hl">M<br>N</span></div>
|
||||
<div class="grid c vl"><span class="fb hl pbs" style="padding-top:22px">A<br>B</span><span class="hl">M<br>N</span></div>
|
||||
<div class="grid c vr"><span class="fb hl" style="padding-top:27px">A<br>B</span><span class="hl">M<br>N</span></div>
|
||||
<div class="grid c vr" style="inline-size:100px"><span class="hl pbe" style="justify-self:start; padding-top:27px">A<br>B</span><span class="fb hl">M<br>N</span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,90 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Test: align-content:baseline/last baseline</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-content">
|
||||
<link rel="match" href="masonry-grid-item-content-baseline-001-ref.html">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:15px/1 Ahem; padding:0; margin:0;
|
||||
}
|
||||
|
||||
.grid {
|
||||
float: left;
|
||||
display: grid;
|
||||
grid: masonry / repeat(4, auto);
|
||||
border: 2px solid;
|
||||
padding: 1px;
|
||||
margin: 1px;
|
||||
}
|
||||
.c {
|
||||
grid: repeat(4, auto) / masonry;
|
||||
}
|
||||
|
||||
span {
|
||||
background: lime;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
span:nth-child(1) { font-size:15px; }
|
||||
span:nth-child(2) { font-size:30px; }
|
||||
span:nth-child(3) { font-size:10px; }
|
||||
.pbs { padding-block-start: 15px; margin-block-start: 5px; }
|
||||
.pbe { padding-block-end: 7px; margin-block-end: 3px; }
|
||||
|
||||
.fb { align-content:baseline; }
|
||||
.lb { align-content:last baseline; }
|
||||
|
||||
.hl { writing-mode: horizontal-tb; direction:ltr; }
|
||||
.hr { writing-mode: horizontal-tb; direction:rtl; }
|
||||
.vl { writing-mode: vertical-lr; text-orientation: sideways; }
|
||||
.vr { writing-mode: vertical-rl; text-orientation: sideways; }
|
||||
.vlr { writing-mode: vertical-lr; direction:rtl; text-orientation: sideways; }
|
||||
.vrl { writing-mode: vertical-rl; direction:ltr; text-orientation: sideways; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="grid hl"><span class="fb">A<br>B</span><span class="fb">M<br>N</span><span class="fb">X<br>Z</span></div>
|
||||
<div class="grid hl"><span class="fb pbe">A<br>B</span><span class="fb">M<br>N</span><span class="fb">X<br>Z</span></div>
|
||||
<div class="grid vl"><span class="fb">A<br>B</span><span class="fb">M<br>N</span><span class="fb">X<br>Z</span></div>
|
||||
<div class="grid vl"><span class="fb pbs">A<br>B</span><span class="fb">M<br>N</span><span class="fb">X<br>Z</span></div>
|
||||
<div class="grid vr"><span class="fb">A<br>B</span><span class="fb">M<br>N</span><span class="fb">X<br>Z</span></div>
|
||||
<div class="grid vr"><span class="fb pbe">A<br>B</span><span class="fb">M<br>N</span><span class="fb">X<br>Z</span></div>
|
||||
|
||||
<br clear="all">
|
||||
|
||||
<div class="grid hl"><span class="lb">A<br>B</span><span class="lb">M<br>N</span></div>
|
||||
<div class="grid hl"><span class="lb pbe">A<br>B</span><span class="lb">M<br>N</span></div>
|
||||
<div class="grid vl"><span class="lb">A<br>B</span><span class="lb">M<br>N</span></div>
|
||||
<div class="grid vl"><span class="lb pbs">A<br>B</span><span class="lb">M<br>N</span></div>
|
||||
<div class="grid vr"><span class="lb">A<br>B</span><span class="lb">M<br>N</span></div>
|
||||
<div class="grid vr"><span class="lb pbe">A<br>B</span><span class="lb">M<br>N</span></div>
|
||||
|
||||
<br clear="all">
|
||||
|
||||
<div class="grid c hl"><span class="fb vl">A<br>B</span><span class="fb vl">M<br>N</span><span class="fb vl">X<br>Z</span></div>
|
||||
<div class="grid c hl"><span class="fb vl pbe">A<br>B</span><span class="fb vl">M<br>N</span><span class="fb vl">X<br>Z</span></div>
|
||||
<div class="grid c vl"><span class="fb hl">A<br>B</span><span class="fb hl">M<br>N</span><span class="fb hl">X<br>Z</span></div>
|
||||
<div class="grid c vl" style="inline-size:100px"><span class="fb hl pbs">A<br>B</span><span class="fb hl">M<br>N</span><span class="fb hl">X<br>Z</span></div>
|
||||
<div class="grid c vr"><span class="fb hl">A<br>B</span><span class="fb hl">M<br>N</span><span class="fb hl">X<br>Z</span></div>
|
||||
<div class="grid c vr"><span class="fb hl pbe">A<br>B</span><span class="fb hl">M<br>N</span><span class="fb hl">X<br>Z</span></div>
|
||||
|
||||
<br clear="all">
|
||||
|
||||
<div class="grid c hl"><span class="lb vl">A<br>B</span><span class="lb vl">M<br>N</span></div>
|
||||
<div class="grid c hl"><span class="lb vl pbe">A<br>B</span><span class="lb vl">M<br>N</span></div>
|
||||
<div class="grid c vl"><span class="lb hl">A<br>B</span><span class="lb hl">M<br>N</span></div>
|
||||
<div class="grid c vl"><span class="lb hl pbs">A<br>B</span><span class="lb hl">M<br>N</span></div>
|
||||
<div class="grid c vr"><span class="lb hl">A<br>B</span><span class="lb hl">M<br>N</span></div>
|
||||
<div class="grid c vr" style="inline-size:100px"><span class="lb hl pbe">A<br>B</span><span class="lb hl">M<br>N</span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,123 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>Reference: align-self/justify-self:baseline/last baseline</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
body { width:600px; height:600px; border:1px solid; box-sizing:border-box; }
|
||||
|
||||
.grid {
|
||||
float: left;
|
||||
display: grid;
|
||||
grid: auto / repeat(4, auto);
|
||||
place-items: start;
|
||||
padding-block-start: 1px;
|
||||
margin-left: 1px;
|
||||
border:1px solid;
|
||||
}
|
||||
.c {
|
||||
grid: repeat(4, auto) / auto;
|
||||
}
|
||||
|
||||
span {
|
||||
text-decoration: underline lime;
|
||||
text-decoration-thickness: 1px;
|
||||
text-underline-offset: 0;
|
||||
text-decoration-skip-ink: none;
|
||||
background: grey;
|
||||
}
|
||||
.central > span { text-decoration-line: line-through; }
|
||||
x { display:block; visibility:hidden; }
|
||||
span:nth-child(1) { font-size:10px; }
|
||||
span:nth-child(2) { font-size:15px; }
|
||||
span:nth-child(3) { font-size:25px; }
|
||||
span:nth-child(4) { font-size:30px; }
|
||||
.pbe { padding-block-end:20px; }
|
||||
.pbs { padding-block-start:20px; }
|
||||
|
||||
.fb { align-self:baseline; }
|
||||
.lb { align-self:last baseline; }
|
||||
|
||||
.jfb { justify-self:baseline; }
|
||||
.jlb { justify-self:last baseline; }
|
||||
|
||||
.hl { writing-mode: horizontal-tb; direction:ltr; }
|
||||
.hr { writing-mode: horizontal-tb; direction:rtl; }
|
||||
.vll { writing-mode: vertical-lr; direction:ltr; }
|
||||
.vlr { writing-mode: vertical-lr; direction:rtl; }
|
||||
.vrl { writing-mode: vertical-rl; direction:ltr; }
|
||||
.vrr { writing-mode: vertical-rl; direction:rtl; }
|
||||
.swl { writing-mode: sideways-lr; }
|
||||
.swr { writing-mode: sideways-rl; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="grid"><span class="fb hl">F<br><x>x</x></span><span class="fb hl">F<br><x>x</x></span><span class="fb hl">F<br><x>x</x></span><span class="fb hl">F<br><x>x</x></span></div>
|
||||
<div class="grid"><span class="fb hl pbe">F<br><x>x</x></span><span class="fb hl">F<br><x>x</x></span><span class="fb hl">F<br><x>x</x></span><span class="fb hl">F<br><x>x</x></span></div>
|
||||
<div class="grid vll central"><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div>
|
||||
<div class="grid vll central"><span class="fb pbs">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div>
|
||||
<div class="grid vlr central"><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div>
|
||||
<div class="grid vrr central"><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div>
|
||||
<div class="grid vrr central"><span class="fb pbe">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div>
|
||||
<div class="grid vrl central"><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div>
|
||||
<div class="grid swl central"><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div>
|
||||
<div class="grid swr central"><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div>
|
||||
|
||||
<br clear="all">
|
||||
|
||||
<div class="grid"><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span></div>
|
||||
<div class="grid"><span class="lb hl pbe"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span></div>
|
||||
<div class="grid vll central"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
|
||||
<div class="grid vlr central"><span class="lb pbs"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
|
||||
<div class="grid vrr central"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
|
||||
<div class="grid vrl central"><span class="lb pbe"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
|
||||
<div class="grid swl"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
|
||||
<div class="grid swr"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
|
||||
|
||||
<br clear="all">
|
||||
|
||||
<div class="grid c central"><span class="jfb vll">F<br><x>x</x></span><span class="jfb vll">F<br><x>x</x></span><span class="jfb vll">F<br><x>x</x></span><span class="jfb vll">F<br><x>x</x></span></div>
|
||||
<div class="grid c central"><span class="jfb vll pbe">F<br><x>x</x></span><span class="jfb vll">F<br><x>x</x></span><span class="jfb vll">F<br><x>x</x></span><span class="jfb vll">F<br><x>x</x></span></div>
|
||||
<div class="grid c vll"><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span></div>
|
||||
<!-- TODO: baseline alignment affects intrinsic inline size
|
||||
<div class="grid c vll"><span class="jfb hl pbs">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span></div>
|
||||
-->
|
||||
<div class="grid c vll" style="height:80px"><span class="jfb hl pbs">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span></div>
|
||||
<!-- TODO
|
||||
<div class="grid c vrr"><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span></div>
|
||||
<div class="grid c vrr"><span class="jfb hl pbe">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span></div>
|
||||
<div class="grid c swl"><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span></div>
|
||||
-->
|
||||
<div class="grid c swr"><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span></div>
|
||||
|
||||
<br clear="all">
|
||||
|
||||
<div class="grid"><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span></div>
|
||||
<div class="grid"><span class="lb hl pbe"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span></div>
|
||||
<div class="grid vll central"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
|
||||
<div class="grid vll central"><span class="lb pbs"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
|
||||
<div class="grid vrr central"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
|
||||
<div class="grid vrr central"><span class="lb pbe"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
|
||||
<div class="grid swl"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
|
||||
<div class="grid swr"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
|
||||
|
||||
<br clear="all">
|
||||
|
||||
<div class="grid vlr central"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
|
||||
<div class="grid vlr central"><span class="lb pbs"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
|
||||
<div class="grid vrl central"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
|
||||
<div class="grid vrl central"><span class="lb pbe"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
|
||||
<div class="grid swl"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
|
||||
<div class="grid swr"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,125 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Test: align-self/justify-self:baseline/last baseline</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
|
||||
<link rel="match" href="masonry-grid-item-self-baseline-001-ref.html">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
body { width:600px; height:600px; border:1px solid; box-sizing:border-box; }
|
||||
|
||||
.grid {
|
||||
float: left;
|
||||
display: grid;
|
||||
grid: masonry / repeat(4, auto);
|
||||
place-items: start;
|
||||
padding-block-start: 1px;
|
||||
margin-left: 1px;
|
||||
border:1px solid;
|
||||
}
|
||||
.c {
|
||||
grid: repeat(4, auto) / masonry;
|
||||
}
|
||||
|
||||
span {
|
||||
text-decoration: underline lime;
|
||||
text-decoration-thickness: 1px;
|
||||
text-underline-offset: 0;
|
||||
text-decoration-skip-ink: none;
|
||||
background: grey;
|
||||
}
|
||||
.central > span { text-decoration-line: line-through; }
|
||||
x { display:block; visibility:hidden; }
|
||||
span:nth-child(1) { font-size:10px; }
|
||||
span:nth-child(2) { font-size:15px; }
|
||||
span:nth-child(3) { font-size:25px; }
|
||||
span:nth-child(4) { font-size:30px; }
|
||||
.pbe { padding-block-end:20px; }
|
||||
.pbs { padding-block-start:20px; }
|
||||
|
||||
.fb { align-self:baseline; }
|
||||
.lb { align-self:last baseline; }
|
||||
|
||||
.jfb { justify-self:baseline; }
|
||||
.jlb { justify-self:last baseline; }
|
||||
|
||||
.hl { writing-mode: horizontal-tb; direction:ltr; }
|
||||
.hr { writing-mode: horizontal-tb; direction:rtl; }
|
||||
.vll { writing-mode: vertical-lr; direction:ltr; }
|
||||
.vlr { writing-mode: vertical-lr; direction:rtl; }
|
||||
.vrl { writing-mode: vertical-rl; direction:ltr; }
|
||||
.vrr { writing-mode: vertical-rl; direction:rtl; }
|
||||
.swl { writing-mode: sideways-lr; }
|
||||
.swr { writing-mode: sideways-rl; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="grid"><span class="fb hl">F<br><x>x</x></span><span class="fb hl">F<br><x>x</x></span><span class="fb hl">F<br><x>x</x></span><span class="fb hl">F<br><x>x</x></span></div>
|
||||
<div class="grid"><span class="fb hl pbe">F<br><x>x</x></span><span class="fb hl">F<br><x>x</x></span><span class="fb hl">F<br><x>x</x></span><span class="fb hl">F<br><x>x</x></span></div>
|
||||
<div class="grid vll central"><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div>
|
||||
<div class="grid vll central"><span class="fb pbs">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div>
|
||||
<div class="grid vlr central"><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div>
|
||||
<div class="grid vrr central"><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div>
|
||||
<div class="grid vrr central"><span class="fb pbe">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div>
|
||||
<div class="grid vrl central"><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div>
|
||||
<div class="grid swl central"><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div>
|
||||
<div class="grid swr central"><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div>
|
||||
|
||||
<br clear="all">
|
||||
|
||||
<div class="grid"><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span></div>
|
||||
<div class="grid"><span class="lb hl pbe"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span></div>
|
||||
<div class="grid vll central"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
|
||||
<div class="grid vlr central"><span class="lb pbs"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
|
||||
<div class="grid vrr central"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
|
||||
<div class="grid vrl central"><span class="lb pbe"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
|
||||
<div class="grid swl"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
|
||||
<div class="grid swr"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
|
||||
|
||||
<br clear="all">
|
||||
|
||||
<div class="grid c central"><span class="jfb vll">F<br><x>x</x></span><span class="jfb vll">F<br><x>x</x></span><span class="jfb vll">F<br><x>x</x></span><span class="jfb vll">F<br><x>x</x></span></div>
|
||||
<div class="grid c central"><span class="jfb vll pbe">F<br><x>x</x></span><span class="jfb vll">F<br><x>x</x></span><span class="jfb vll">F<br><x>x</x></span><span class="jfb vll">F<br><x>x</x></span></div>
|
||||
<div class="grid c vll"><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span></div>
|
||||
<!-- TODO: baseline alignment affects intrinsic inline size
|
||||
<div class="grid c vll"><span class="jfb hl pbs">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span></div>
|
||||
-->
|
||||
<div class="grid c vll" style="height:80px"><span class="jfb hl pbs">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span></div>
|
||||
<!-- TODO
|
||||
<div class="grid c vrr"><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span></div>
|
||||
<div class="grid c vrr"><span class="jfb hl pbe">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span></div>
|
||||
<div class="grid c swl"><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span></div>
|
||||
-->
|
||||
<div class="grid c swr"><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span></div>
|
||||
|
||||
<br clear="all">
|
||||
|
||||
<div class="grid"><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span></div>
|
||||
<div class="grid"><span class="lb hl pbe"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span></div>
|
||||
<div class="grid vll central"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
|
||||
<div class="grid vll central"><span class="lb pbs"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
|
||||
<div class="grid vrr central"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
|
||||
<div class="grid vrr central"><span class="lb pbe"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
|
||||
<div class="grid swl"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
|
||||
<div class="grid swr"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
|
||||
|
||||
<br clear="all">
|
||||
|
||||
<div class="grid vlr central"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
|
||||
<div class="grid vlr central"><span class="lb pbs"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
|
||||
<div class="grid vrl central"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
|
||||
<div class="grid vrl central"><span class="lb pbe"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
|
||||
<div class="grid swl"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
|
||||
<div class="grid swr"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,102 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>Reference: align-self/justify-self:baseline/last baseline</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
body { width:600px; height:600px; border:1px solid; box-sizing:border-box; }
|
||||
|
||||
.grid {
|
||||
float: left;
|
||||
display: grid;
|
||||
grid: auto / repeat(4, auto);
|
||||
place-items: start;
|
||||
padding-block-start: 1px;
|
||||
margin-left: 1px;
|
||||
border:1px solid;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
.c { grid: repeat(4, auto) / auto; }
|
||||
.ae { align-content: end; }
|
||||
.je { justify-content: end; }
|
||||
|
||||
span {
|
||||
text-decoration: underline lime;
|
||||
text-decoration-thickness: 1px;
|
||||
text-underline-offset: 0;
|
||||
text-decoration-skip-ink: none;
|
||||
background: grey;
|
||||
}
|
||||
.central > span { text-decoration-line: line-through; }
|
||||
x { display:block; visibility:hidden; }
|
||||
span:nth-child(1) { font-size:10px; }
|
||||
span:nth-child(2) { font-size:15px; }
|
||||
span:nth-child(3) { font-size:25px; }
|
||||
span:nth-child(4) { font-size:30px; }
|
||||
.pbe { padding-block-end:20px; }
|
||||
.pbs { padding-block-start:20px; }
|
||||
|
||||
.fb { align-self:baseline; }
|
||||
.lb { align-self:last baseline; }
|
||||
|
||||
.jfb { justify-self:baseline; }
|
||||
.jlb { justify-self:last baseline; }
|
||||
|
||||
.hl { writing-mode: horizontal-tb; direction:ltr; }
|
||||
.hr { writing-mode: horizontal-tb; direction:rtl; }
|
||||
.vll { writing-mode: vertical-lr; direction:ltr; }
|
||||
.vlr { writing-mode: vertical-lr; direction:rtl; }
|
||||
.vrl { writing-mode: vertical-rl; direction:ltr; }
|
||||
.vrr { writing-mode: vertical-rl; direction:rtl; }
|
||||
.swl { writing-mode: sideways-lr; }
|
||||
.swr { writing-mode: sideways-rl; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="grid ae"><span class="fb hl">F<br><x>x</x></span><span class="fb hl">F<br><x>x</x></span><span class="fb hl">F<br><x>x</x></span><span class="fb hl">F<br><x>x</x></span></div>
|
||||
<div class="grid ae"><span class="fb hl pbe">F<br><x>x</x></span><span class="fb hl">F<br><x>x</x></span><span class="fb hl">F<br><x>x</x></span><span class="fb hl">F<br><x>x</x></span></div>
|
||||
<div class="grid ae vll central"><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div>
|
||||
<div class="grid ae vll central"><span class="fb pbs">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div>
|
||||
<div class="grid ae vlr central"><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div>
|
||||
|
||||
<br clear="all">
|
||||
|
||||
<div class="grid ae vrr central"><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div>
|
||||
<div class="grid ae vrr central"><span class="fb pbe">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div>
|
||||
<div class="grid ae vrl central"><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div>
|
||||
<div class="grid ae swl central"><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div>
|
||||
<div class="grid ae swr central"><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div>
|
||||
|
||||
<br clear="all">
|
||||
|
||||
<div class="grid"><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span></div>
|
||||
<div class="grid"><span class="lb hl pbe"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span></div>
|
||||
<div class="grid vll central"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
|
||||
<div class="grid vlr central"><span class="lb pbs"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
|
||||
<div class="grid vrr central"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
|
||||
|
||||
<br clear="all">
|
||||
|
||||
<div class="grid vrl central"><span class="lb pbe"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
|
||||
<div class="grid swl"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
|
||||
<div class="grid swr"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
|
||||
<div class="grid je c central"><span class="jfb vll">F<br><x>x</x></span><span class="jfb vll">F<br><x>x</x></span><span class="jfb vll">F<br><x>x</x></span><span class="jfb vll">F<br><x>x</x></span></div>
|
||||
<div class="grid je c central"><span class="jfb vll pbe">F<br><x>x</x></span><span class="jfb vll">F<br><x>x</x></span><span class="jfb vll">F<br><x>x</x></span><span class="jfb vll">F<br><x>x</x></span></div>
|
||||
|
||||
<br clear="all">
|
||||
|
||||
<div class="grid je c vll"><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span></div>
|
||||
<div class="grid je c vll"><span class="jfb hl pbs">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,105 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Test: align-self/justify-self:baseline/last baseline</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
|
||||
<link rel="match" href="masonry-grid-item-self-baseline-002a-ref.html">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
body { width:600px; height:600px; border:1px solid; box-sizing:border-box; }
|
||||
|
||||
.grid {
|
||||
float: left;
|
||||
display: grid;
|
||||
grid: masonry / repeat(4, auto);
|
||||
place-items: start;
|
||||
padding-block-start: 1px;
|
||||
margin-left: 1px;
|
||||
border:1px solid;
|
||||
align-tracks: end;
|
||||
justify-tracks: end;
|
||||
masonry-auto-flow: next;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
.c { grid: repeat(4, auto) / masonry; }
|
||||
|
||||
span {
|
||||
text-decoration: underline lime;
|
||||
text-decoration-thickness: 1px;
|
||||
text-underline-offset: 0;
|
||||
text-decoration-skip-ink: none;
|
||||
background: grey;
|
||||
}
|
||||
.central > span { text-decoration-line: line-through; }
|
||||
x { display:block; background:yellow; visibility:hidden; }
|
||||
span:nth-child(1) { font-size:10px; }
|
||||
span:nth-child(2) { font-size:15px; }
|
||||
span:nth-child(3) { font-size:25px; }
|
||||
span:nth-child(4) { font-size:30px; }
|
||||
.pbe { padding-block-end:20px; }
|
||||
.pbs { padding-block-start:20px; }
|
||||
|
||||
.fb { align-self:baseline; }
|
||||
.lb { align-self:last baseline; }
|
||||
|
||||
.jfb { justify-self:baseline; }
|
||||
.jlb { justify-self:last baseline; }
|
||||
|
||||
.hl { writing-mode: horizontal-tb; direction:ltr; }
|
||||
.hr { writing-mode: horizontal-tb; direction:rtl; }
|
||||
.vll { writing-mode: vertical-lr; direction:ltr; }
|
||||
.vlr { writing-mode: vertical-lr; direction:rtl; }
|
||||
.vrl { writing-mode: vertical-rl; direction:ltr; }
|
||||
.vrr { writing-mode: vertical-rl; direction:rtl; }
|
||||
.swl { writing-mode: sideways-lr; }
|
||||
.swr { writing-mode: sideways-rl; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="grid"><span class="fb hl">F<br><x>x</x></span><span class="fb hl">F<br><x>x</x></span><span class="fb hl">F<br><x>x</x></span><span class="fb hl">F<br><x>x</x></span></div>
|
||||
<div class="grid"><span class="fb hl pbe">F<br><x>x</x></span><span class="fb hl">F<br><x>x</x></span><span class="fb hl">F<br><x>x</x></span><span class="fb hl">F<br><x>x</x></span></div>
|
||||
<div class="grid vll central"><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div>
|
||||
<div class="grid vll central"><span class="fb pbs">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div>
|
||||
<div class="grid vlr central"><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div>
|
||||
|
||||
<br clear="all">
|
||||
|
||||
<div class="grid vrr central"><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div>
|
||||
<div class="grid vrr central"><span class="fb pbe">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div>
|
||||
<div class="grid vrl central"><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div>
|
||||
<div class="grid swl central"><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div>
|
||||
<div class="grid swr central"><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div>
|
||||
|
||||
<br clear="all">
|
||||
|
||||
<div class="grid"><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span></div>
|
||||
<div class="grid"><span class="lb hl pbe"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span></div>
|
||||
<div class="grid vll central"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
|
||||
<div class="grid vlr central"><span class="lb pbs"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
|
||||
<div class="grid vrr central"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
|
||||
|
||||
<br clear="all">
|
||||
|
||||
<div class="grid vrl central"><span class="lb pbe"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
|
||||
<div class="grid swl"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
|
||||
<div class="grid swr"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
|
||||
<div class="grid c central"><span class="jfb vll">F<br><x>x</x></span><span class="jfb vll">F<br><x>x</x></span><span class="jfb vll">F<br><x>x</x></span><span class="jfb vll">F<br><x>x</x></span></div>
|
||||
<div class="grid c central"><span class="jfb vll pbe">F<br><x>x</x></span><span class="jfb vll">F<br><x>x</x></span><span class="jfb vll">F<br><x>x</x></span><span class="jfb vll">F<br><x>x</x></span></div>
|
||||
|
||||
<br clear="all">
|
||||
|
||||
<div class="grid c vll"><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span></div>
|
||||
<div class="grid c vll"><span class="jfb hl pbs">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,97 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>Reference: align-self/justify-self:baseline/last baseline</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
body { width:600px; height:600px; border:1px solid; box-sizing:border-box; }
|
||||
|
||||
.grid {
|
||||
float: left;
|
||||
display: grid;
|
||||
grid: auto / repeat(4, auto);
|
||||
place-items: start;
|
||||
padding-block-start: 1px;
|
||||
margin-left: 1px;
|
||||
border:1px solid;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
.c { grid: repeat(4, auto) / auto; }
|
||||
.ae { align-content: end; }
|
||||
.je { justify-content: end; }
|
||||
|
||||
span {
|
||||
text-decoration: underline lime;
|
||||
text-decoration-thickness: 1px;
|
||||
text-underline-offset: 0;
|
||||
text-decoration-skip-ink: none;
|
||||
background: grey;
|
||||
}
|
||||
.central > span { text-decoration-line: line-through; }
|
||||
x { display:block; visibility:hidden; }
|
||||
span:nth-child(1) { font-size:10px; }
|
||||
span:nth-child(2) { font-size:15px; }
|
||||
span:nth-child(3) { font-size:25px; }
|
||||
span:nth-child(4) { font-size:30px; }
|
||||
.pbe { padding-block-end:20px; }
|
||||
.pbs { padding-block-start:20px; }
|
||||
|
||||
.fb { align-self:baseline; }
|
||||
.lb { align-self:last baseline; }
|
||||
|
||||
.jfb { justify-self:baseline; }
|
||||
.jlb { justify-self:last baseline; }
|
||||
|
||||
.hl { writing-mode: horizontal-tb; direction:ltr; }
|
||||
.hr { writing-mode: horizontal-tb; direction:rtl; }
|
||||
.vll { writing-mode: vertical-lr; direction:ltr; }
|
||||
.vlr { writing-mode: vertical-lr; direction:rtl; }
|
||||
.vrl { writing-mode: vertical-rl; direction:ltr; }
|
||||
.vrr { writing-mode: vertical-rl; direction:rtl; }
|
||||
.swl { writing-mode: sideways-lr; }
|
||||
.swr { writing-mode: sideways-rl; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- TODO: baseline alignment is wrong (bug 1633610)
|
||||
<div class="grid je c vrr"><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span></div>
|
||||
<div class="grid je c vrr"><span class="jfb hl pbe">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span></div>
|
||||
<div class="grid je c swl"><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span></div>
|
||||
-->
|
||||
<div class="grid je c swr"><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span></div>
|
||||
<div class="grid ae"><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span></div>
|
||||
|
||||
<br clear="all">
|
||||
|
||||
<div class="grid"><span class="lb hl pbe"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span></div>
|
||||
<div class="grid vll central"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
|
||||
<div class="grid vll central"><span class="lb pbs"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
|
||||
<div class="grid vrr central"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
|
||||
<div class="grid vrr central"><span class="lb pbe"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
|
||||
|
||||
<br clear="all">
|
||||
|
||||
<div class="grid swl"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
|
||||
<div class="grid swr"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
|
||||
<div class="grid vlr central"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
|
||||
<div class="grid vlr central"><span class="lb pbs"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
|
||||
<div class="grid vrl central"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
|
||||
|
||||
<br clear="all">
|
||||
|
||||
<div class="grid vrl central"><span class="lb pbe"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
|
||||
<div class="grid swl"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
|
||||
<div class="grid swr"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,101 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Test: align-self/justify-self:baseline/last baseline</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
|
||||
<link rel="match" href="masonry-grid-item-self-baseline-002b-ref.html">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
body { width:600px; height:600px; border:1px solid; box-sizing:border-box; }
|
||||
|
||||
.grid {
|
||||
float: left;
|
||||
display: grid;
|
||||
grid: masonry / repeat(4, auto);
|
||||
place-items: start;
|
||||
padding-block-start: 1px;
|
||||
margin-left: 1px;
|
||||
border:1px solid;
|
||||
align-tracks: end;
|
||||
justify-tracks: end;
|
||||
masonry-auto-flow: next;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
.c { grid: repeat(4, auto) / masonry; }
|
||||
|
||||
span {
|
||||
text-decoration: underline lime;
|
||||
text-decoration-thickness: 1px;
|
||||
text-underline-offset: 0;
|
||||
text-decoration-skip-ink: none;
|
||||
background: grey;
|
||||
}
|
||||
.central > span { text-decoration-line: line-through; }
|
||||
x { display:block; background:yellow; visibility:hidden; }
|
||||
span:nth-child(1) { font-size:10px; }
|
||||
span:nth-child(2) { font-size:15px; }
|
||||
span:nth-child(3) { font-size:25px; }
|
||||
span:nth-child(4) { font-size:30px; }
|
||||
.pbe { padding-block-end:20px; }
|
||||
.pbs { padding-block-start:20px; }
|
||||
|
||||
.fb { align-self:baseline; }
|
||||
.lb { align-self:last baseline; }
|
||||
|
||||
.jfb { justify-self:baseline; }
|
||||
.jlb { justify-self:last baseline; }
|
||||
|
||||
.hl { writing-mode: horizontal-tb; direction:ltr; }
|
||||
.hr { writing-mode: horizontal-tb; direction:rtl; }
|
||||
.vll { writing-mode: vertical-lr; direction:ltr; }
|
||||
.vlr { writing-mode: vertical-lr; direction:rtl; }
|
||||
.vrl { writing-mode: vertical-rl; direction:ltr; }
|
||||
.vrr { writing-mode: vertical-rl; direction:rtl; }
|
||||
.swl { writing-mode: sideways-lr; }
|
||||
.swr { writing-mode: sideways-rl; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- TODO: baseline alignment is wrong (bug 1633610)
|
||||
<div class="grid c vrr"><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span></div>
|
||||
<div class="grid c vrr"><span class="jfb hl pbe">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span></div>
|
||||
<div class="grid c swl"><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span></div>
|
||||
-->
|
||||
<div class="grid c swr"><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span></div>
|
||||
|
||||
<div class="grid"><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span></div>
|
||||
|
||||
<br clear="all">
|
||||
|
||||
<div class="grid"><span class="lb hl pbe"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span></div>
|
||||
<div class="grid vll central"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
|
||||
<div class="grid vll central"><span class="lb pbs"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
|
||||
<div class="grid vrr central"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
|
||||
<div class="grid vrr central"><span class="lb pbe"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
|
||||
|
||||
<br clear="all">
|
||||
|
||||
<div class="grid swl"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
|
||||
<div class="grid swr"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
|
||||
<div class="grid vlr central"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
|
||||
<div class="grid vlr central"><span class="lb pbs"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
|
||||
<div class="grid vrl central"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
|
||||
|
||||
<br clear="all">
|
||||
|
||||
<div class="grid vrl central"><span class="lb pbe"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
|
||||
<div class="grid swl"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
|
||||
<div class="grid swr"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,129 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>Reference: Placement involving named lines</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<style>
|
||||
body,html { color:black; background:white; font-size:15px/1 monospace; padding:0; margin:0; }
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
position: relative;
|
||||
border: 1px solid;
|
||||
grid-gap: 1px;
|
||||
grid-auto-flow: dense;
|
||||
}
|
||||
.t1 {
|
||||
grid-template-columns: 40px 40px 40px 60px 60px 60px 40px 40px 40px 40px 40px 40px;
|
||||
|
||||
}
|
||||
.t2 {
|
||||
grid-template-columns: 40px 40px 40px 40px 60px 60px 60px 40px 40px 40px 40px 40px;
|
||||
}
|
||||
|
||||
x {
|
||||
background: grey;
|
||||
border: 1px solid;
|
||||
}
|
||||
y {
|
||||
position: absolute;
|
||||
border-top: 1px solid blue;
|
||||
bottom:0;height:0;left:0;right:0;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<pre>grid-column-start:</pre>
|
||||
<div class="grid t1" style="padding-right:13px; border-right-width:5px">
|
||||
<x style="grid-column-start:4; background:grey"></x>
|
||||
<x style="grid-column-start:7">-1</x>
|
||||
<x style="grid-column-start:7">4</x>
|
||||
<x style="grid-column-start:6">-2</x>
|
||||
<x style="grid-column-start:5">-3</x>
|
||||
<x style="grid-column-start:4">-4</x>
|
||||
<x style="grid-column-start:3">-5</x>
|
||||
<x style="grid-column-start:5">A -1</x>
|
||||
<x style="grid-column-start:3">B -1</x>
|
||||
<x style="grid-column-start:4">A -2</x>
|
||||
<x style="grid-column-start:3">A -3</x>
|
||||
<x style="grid-column-start:2">A -4</x>
|
||||
<x style="grid-column-start:1">A -5</x>
|
||||
<x style="grid-column-start:4">A</x>
|
||||
<x style="grid-column-start:4">B</x>
|
||||
<x style="grid-column-start:4">A 1</x>
|
||||
<x style="grid-column-start:5">A 2</x>
|
||||
<x style="grid-column-start:8">A 3</x>
|
||||
<x style="grid-column-start:9">A 4</x>
|
||||
<x style="grid-column-start:10">A 5</x>
|
||||
<y style="grid-column-start:7; top:0"></y>
|
||||
<y style="grid-column-start:7; top:2px"></y>
|
||||
<y style="grid-column-start:6; top:4px"></y>
|
||||
<y style="grid-column-start:5; top:6px"></y>
|
||||
<y style="grid-column-start:4; top:8px"></y>
|
||||
<y style="grid-column-start:3; top:10px"></y>
|
||||
<y style="grid-column-start:5; top:12px"></y>
|
||||
<y style="grid-column-start:3; top:14px"></y>
|
||||
<y style="grid-column-start:4; top:16px"></y>
|
||||
<y style="grid-column-start:3; top:18px"></y>
|
||||
<y style="grid-column-start:2; top:20px"></y>
|
||||
<y style="grid-column-start:1; top:22px"></y>
|
||||
<y style="grid-column-start:4; top:24px"></y>
|
||||
<y style="grid-column-start:4; top:26px"></y>
|
||||
<y style="grid-column-start:4; top:28px"></y>
|
||||
<y style="grid-column-start:5; top:30px"></y>
|
||||
<y style="grid-column-start:8; top:32px"></y>
|
||||
<y style="grid-column-start:9; top:34px"></y>
|
||||
<y style="grid-column-start:10; top:36px"></y>
|
||||
</div>
|
||||
|
||||
<pre>grid-column-end:</pre>
|
||||
<div class="grid t2" style="padding-left:13px;">
|
||||
<x style="grid-column-start:5; background:grey"></x>
|
||||
<x style="grid-column-start:7">-1</x>
|
||||
<x style="grid-column-start:7">4</x>
|
||||
<x style="grid-column-start:6">-2</x>
|
||||
<x style="grid-column-start:5">-3</x>
|
||||
<x style="grid-column-start:4">-4</x>
|
||||
<x style="grid-column-start:3">-5</x>
|
||||
<x style="grid-column-start:5">A -1</x>
|
||||
<x style="grid-column-start:3">B -1</x>
|
||||
<x style="grid-column-start:4">A -2</x>
|
||||
<x style="grid-column-start:3">A -3</x>
|
||||
<x style="grid-column-start:2">A -4</x>
|
||||
<x style="grid-column-start:1">A -5</x>
|
||||
<x style="grid-column-start:4">A</x>
|
||||
<x style="grid-column-start:5">B</x>
|
||||
<x style="grid-column-start:4">A 1</x>
|
||||
<x style="grid-column-start:5">A 2</x>
|
||||
<x style="grid-column-start:8">A 3</x>
|
||||
<x style="grid-column-start:9">A 4</x>
|
||||
<x style="grid-column-start:10">A 5</x>
|
||||
<y style="grid-column-end:8; top:0px"></y>
|
||||
<y style="grid-column-end:8; top:2px"></y>
|
||||
<y style="grid-column-end:4; top:4px"></y>
|
||||
<y style="grid-column-end:5; top:6px"></y>
|
||||
<y style="grid-column-end:6; top:8px"></y>
|
||||
<y style="grid-column-end:7; top:10px"></y>
|
||||
<y style="grid-column-end:6; top:12px"></y>
|
||||
<y style="grid-column-end:4; top:14px"></y>
|
||||
<y style="grid-column-end:5; top:16px"></y>
|
||||
<y style="grid-column-end:4; top:18px"></y>
|
||||
<y style="grid-column-end:3; top:20px"></y>
|
||||
<y style="grid-column-end:2; top:22px"></y>
|
||||
<y style="grid-column-end:5; top:24px"></y>
|
||||
<y style="grid-column-end:6; top:26px"></y>
|
||||
<y style="grid-column-end:5; top:28px"></y>
|
||||
<y style="grid-column-end:6; top:30px"></y>
|
||||
<y style="grid-column-end:9; top:32px"></y>
|
||||
<y style="grid-column-end:10; top:34px"></y>
|
||||
<y style="grid-column-end:11; top:36px"></y>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,127 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Test: Placement involving named lines</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-placement-int">
|
||||
<link rel="match" href="masonry-grid-placement-named-lines-001-ref.html">
|
||||
<style>
|
||||
body,html { color:black; background:white; font-size:15px/1 monospace; padding:0; margin:0; }
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
position: relative;
|
||||
border: 1px solid;
|
||||
grid-template-columns: [A-start] 60px 60px 60px;
|
||||
grid-template-rows: masonry;
|
||||
grid-template-areas: "B A";
|
||||
grid-auto-columns: 40px;
|
||||
grid-gap: 1px;
|
||||
}
|
||||
|
||||
x {
|
||||
background: grey;
|
||||
border: 1px solid;
|
||||
}
|
||||
y {
|
||||
position: absolute;
|
||||
border-top: 1px solid blue;
|
||||
height:0;left:0;right:0;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<pre>grid-column-start:</pre>
|
||||
<div class="grid" style="padding-right:13px; border-right-width:5px">
|
||||
<x style="grid-column:1; background:grey"> </x>
|
||||
<x style="grid-column-start:-1">-1</x>
|
||||
<x style="grid-column-start:4">4</x>
|
||||
<x style="grid-column-start:-2">-2</x>
|
||||
<x style="grid-column-start:-3">-3</x>
|
||||
<x style="grid-column-start:-4">-4</x>
|
||||
<x style="grid-column-start:-5">-5</x>
|
||||
<x style="grid-column-start:A-start -1">A -1</x>
|
||||
<x style="grid-column-start:B -1">B -1</x>
|
||||
<x style="grid-column-start:A-start -2">A -2</x>
|
||||
<x style="grid-column-start:A-start -3">A -3</x>
|
||||
<x style="grid-column-start:A-start -4">A -4</x>
|
||||
<x style="grid-column-start:A-start -5">A -5</x>
|
||||
<x style="grid-column-start:A-start">A</x>
|
||||
<x style="grid-column-start:B">B</x>
|
||||
<x style="grid-column-start:A-start 1">A 1</x>
|
||||
<x style="grid-column-start:A-start 2">A 2</x>
|
||||
<x style="grid-column-start:A-start 3">A 3</x>
|
||||
<x style="grid-column-start:A-start 4">A 4</x>
|
||||
<x style="grid-column-start:A-start 5">A 5</x>
|
||||
<y style="grid-column-start:-1; top:0"></y>
|
||||
<y style="grid-column-start:4; top:2px"></y>
|
||||
<y style="grid-column-start:-2; top:4px"></y>
|
||||
<y style="grid-column-start:-3; top:6px"></y>
|
||||
<y style="grid-column-start:-4; top:8px"></y>
|
||||
<y style="grid-column-start:-5; top:10px"></y>
|
||||
<y style="grid-column-start:A-start -1; top:12px"></y>
|
||||
<y style="grid-column-start:B -1; top:14px"></y>
|
||||
<y style="grid-column-start:A-start -2; top:16px"></y>
|
||||
<y style="grid-column-start:A-start -3; top:18px"></y>
|
||||
<y style="grid-column-start:A-start -4; top:20px"></y>
|
||||
<y style="grid-column-start:A-start -5; top:22px"></y>
|
||||
<y style="grid-column-start:A-start; top:24px"></y>
|
||||
<y style="grid-column-start:B; top:26px"></y>
|
||||
<y style="grid-column-start:A-start 1; top:28px"></y>
|
||||
<y style="grid-column-start:A-start 2; top:30px"></y>
|
||||
<y style="grid-column-start:A-start 3; top:32px"></y>
|
||||
<y style="grid-column-start:A-start 4; top:34px"></y>
|
||||
<y style="grid-column-start:A-start 5; top:36px"></y>
|
||||
</div>
|
||||
|
||||
<pre>grid-column-end:</pre>
|
||||
<div class="grid" style="padding-left:13px;">
|
||||
<x style="grid-column:1; background:grey"> </x>
|
||||
<x style="grid-column-end:-1">-1</x>
|
||||
<x style="grid-column-end:4">4</x>
|
||||
<x style="grid-column-end:-5">-5</x>
|
||||
<x style="grid-column-end:-4">-4</x>
|
||||
<x style="grid-column-end:-3">-3</x>
|
||||
<x style="grid-column-end:-2">-2</x>
|
||||
<x style="grid-column-end:A-start -1">A -1</x>
|
||||
<x style="grid-column-end:B -1">B -1</x>
|
||||
<x style="grid-column-end:A-start -2">A -2</x>
|
||||
<x style="grid-column-end:A-start -3">A -3</x>
|
||||
<x style="grid-column-end:A-start -4">A -4</x>
|
||||
<x style="grid-column-end:A-start -5">A -5</x>
|
||||
<x style="grid-column-end:A-start">A</x>
|
||||
<x style="grid-column-end:B">B</x>
|
||||
<x style="grid-column-end:A-start 1">A 1</x>
|
||||
<x style="grid-column-end:A-start 2">A 2</x>
|
||||
<x style="grid-column-end:A-start 3">A 3</x>
|
||||
<x style="grid-column-end:A-start 4">A 4</x>
|
||||
<x style="grid-column-end:A-start 5">A 5</x>
|
||||
<y style="grid-column-end:-1; top:0"></y>
|
||||
<y style="grid-column-end:4; top:2px"></y>
|
||||
<y style="grid-column-end:-5; top:4px"></y>
|
||||
<y style="grid-column-end:-4; top:6px"></y>
|
||||
<y style="grid-column-end:-3; top:8px"></y>
|
||||
<y style="grid-column-end:-2; top:10px"></y>
|
||||
<y style="grid-column-end:A-start -1; top:12px"></y>
|
||||
<y style="grid-column-end:B -1; top:14px"></y>
|
||||
<y style="grid-column-end:A-start -2; top:16px"></y>
|
||||
<y style="grid-column-end:A-start -3; top:18px"></y>
|
||||
<y style="grid-column-end:A-start -4; top:20px"></y>
|
||||
<y style="grid-column-end:A-start -5; top:22px"></y>
|
||||
<y style="grid-column-end:A-start; top:24px"></y>
|
||||
<y style="grid-column-end:B; top:26px"></y>
|
||||
<y style="grid-column-end:A-start 1; top:28px"></y>
|
||||
<y style="grid-column-end:A-start 2; top:30px"></y>
|
||||
<y style="grid-column-end:A-start 3; top:32px"></y>
|
||||
<y style="grid-column-end:A-start 4; top:34px"></y>
|
||||
<y style="grid-column-end:A-start 5; top:36px"></y>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,80 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>Reference: Placement involving named lines</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<style>
|
||||
body,html { color:black; background:white; font:15px/1 monospace; padding:0; margin:0; }
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: 40px 40px 40px 60px 60px 60px 40px 40px 40px 40px 40px 40px 40px;
|
||||
position: relative;
|
||||
border: 1px solid;
|
||||
grid-auto-flow: dense;
|
||||
column-gap: 1px;
|
||||
}
|
||||
|
||||
x {
|
||||
background: grey;
|
||||
}
|
||||
y {
|
||||
position: absolute;
|
||||
border: 1px solid blue;
|
||||
top:0;height:0;left:0;right:0;
|
||||
grid-row-end:span 1!important;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<pre>grid-column: / span A-start 2</pre>
|
||||
<div class="grid">
|
||||
<x style="grid-row:1; grid-column:4"> </x>
|
||||
<x style="grid-row:1; grid-column:7/span 2;">-1</x>
|
||||
<x style="grid-row:2; grid-column:7/span 2;">4</x>
|
||||
<x style="grid-row:4; grid-column:6/span 3;">-2</x>
|
||||
<x style="grid-row:5; grid-column:5/span 4;">-3</x>
|
||||
<x style="grid-row:6; grid-column:4/span 4;">-4</x>
|
||||
<x style="grid-row:7; grid-column:3/span 2;">-5</x>
|
||||
<x style="grid-row:7; grid-column:5/span 4;">A -1</x>
|
||||
<x style="grid-row:9; grid-column:3/span 2;">B -1</x>
|
||||
<x style="grid-row:10; grid-column:4/span 4;">A -2</x>
|
||||
<x style="grid-row:11; grid-column:3/span 2;">A -3</x>
|
||||
<x style="grid-row:12; grid-column:2/span 3;">A -4</x>
|
||||
<x style="grid-row:13; grid-column:1/span 4;">A -5</x>
|
||||
<x style="grid-row:14; grid-column:4/span 4;">A</x>
|
||||
<x style="grid-row:15; grid-column:4/span 4;">B</x>
|
||||
<x style="grid-row:16; grid-column:4/span 4;">A 1</x>
|
||||
<x style="grid-row:17; grid-column:5/span 4;">A 2</x>
|
||||
<x style="grid-row:18; grid-column:8/span 2;">A 3</x>
|
||||
<x style="grid-row:1; grid-column:9/span 2;">A 4</x>
|
||||
<x style="grid-row:2; grid-column:10/span 2;">A 5</x>
|
||||
<y style="grid-row:1; grid-column:7/span 2;"></y>
|
||||
<y style="grid-row:2; grid-column:7/span 2;"></y>
|
||||
<y style="grid-row:4; grid-column:6/span 3;"></y>
|
||||
<y style="grid-row:5; grid-column:5/span 4;"></y>
|
||||
<y style="grid-row:6; grid-column:4/span 4;"></y>
|
||||
<y style="grid-row:7; grid-column:3/span 2;"></y>
|
||||
<y style="grid-row:7; grid-column:5/span 4;"></y>
|
||||
<y style="grid-row:9; grid-column:3/span 2;"></y>
|
||||
<y style="grid-row:10; grid-column:4/span 4;"></y>
|
||||
<y style="grid-row:11; grid-column:3/span 2;"></y>
|
||||
<y style="grid-row:12; grid-column:2/span 3;"></y>
|
||||
<y style="grid-row:13; grid-column:1/span 4;"></y>
|
||||
<y style="grid-row:14; grid-column:4/span 4;"></y>
|
||||
<y style="grid-row:15; grid-column:4/span 4;"></y>
|
||||
<y style="grid-row:16; grid-column:4/span 4;"></y>
|
||||
<y style="grid-row:17; grid-column:5/span 4;"></y>
|
||||
<y style="grid-row:18; grid-column:8/span 2;"></y>
|
||||
<y style="grid-row:1; grid-column:9/span 2;"></y>
|
||||
<y style="grid-row:2; grid-column:10/span 2;"></y>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,85 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Test: Placement involving named lines</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-placement-int">
|
||||
<link rel="match" href="masonry-grid-placement-named-lines-002-ref.html">
|
||||
<style>
|
||||
body,html { color:black; background:white; font:15px/1 monospace; padding:0; margin:0; }
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
position: relative;
|
||||
border: 1px solid;
|
||||
grid-template-columns: [A-start] 60px 60px 60px;
|
||||
grid-template-rows: masonry;
|
||||
grid-template-areas: "B A";
|
||||
grid-auto-columns: 40px;
|
||||
grid-auto-flow: dense;
|
||||
gap: 0 1px;
|
||||
}
|
||||
|
||||
x {
|
||||
background: grey;
|
||||
}
|
||||
y {
|
||||
position: absolute;
|
||||
border: 1px solid blue;
|
||||
bottom:0;height:0;left:0;right:0;
|
||||
grid-row-end:span 1!important;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<pre>grid-column: / span A-start 2</pre>
|
||||
<div class="grid">
|
||||
<x style="grid-column:1"> </x>
|
||||
<x style="grid-column:-1/span A-start 2">-1</x>
|
||||
<x style="grid-column:4/span A-start 2">4</x>
|
||||
<x style="grid-column:-2/span A-start 2">-2</x>
|
||||
<x style="grid-column:-3/span A-start 2">-3</x>
|
||||
<x style="grid-column:-4/span A-start 2">-4</x>
|
||||
<x style="grid-column:-5/span A-start 2">-5</x>
|
||||
<x style="grid-column:A-start -1/span A-start 2">A -1</x>
|
||||
<x style="grid-column:B -1/span A-start 2">B -1</x>
|
||||
<x style="grid-column:A-start -2/span A-start 2">A -2</x>
|
||||
<x style="grid-column:A-start -3/span A-start 2">A -3</x>
|
||||
<x style="grid-column:A-start -4/span A-start 2">A -4</x>
|
||||
<x style="grid-column:A-start -5/span A-start 2">A -5</x>
|
||||
<x style="grid-column:A-start/span A-start 2">A</x>
|
||||
<x style="grid-column:B/span B">B</x>
|
||||
<x style="grid-column:A-start 1/span A-start 2">A 1</x>
|
||||
<x style="grid-column:A-start 2/span A-start 2">A 2</x>
|
||||
<x style="grid-column:A-start 3/span A-start 2">A 3</x>
|
||||
<x style="grid-column:A-start 4/span A-start 2">A 4</x>
|
||||
<x style="grid-column:A-start 5/span A-start 2">A 5</x>
|
||||
<y style="grid-column:-1/span A-start 2; top:0em"></y>
|
||||
<y style="grid-column:4/span A-start 2; top:1em"></y>
|
||||
<y style="grid-column:-2/span A-start 2; top:2em"></y>
|
||||
<y style="grid-column:-3/span A-start 2; top:3em"></y>
|
||||
<y style="grid-column:-4/span A-start 2; top:4em"></y>
|
||||
<y style="grid-column:-5/span A-start 2; top:5em"></y>
|
||||
<y style="grid-column:A-start -1/span A-start 2; top:5em"></y>
|
||||
<y style="grid-column:B -1/span A-start 2; top:6em"></y>
|
||||
<y style="grid-column:A-start -2/span A-start 2; top:7em"></y>
|
||||
<y style="grid-column:A-start -3/span A-start 2; top:8em"></y>
|
||||
<y style="grid-column:A-start -4/span A-start 2; top:9em"></y>
|
||||
<y style="grid-column:A-start -5/span A-start 2; top:10em"></y>
|
||||
<y style="grid-column:A-start/span A-start 2; top:11em"></y>
|
||||
<y style="grid-column:B/span B; top:12em"></y>
|
||||
<y style="grid-column:A-start 1/span A-start 2; top:13em"></y>
|
||||
<y style="grid-column:A-start 2/span A-start 2; top:14em"></y>
|
||||
<y style="grid-column:A-start 3/span A-start 2; top:15em"></y>
|
||||
<y style="grid-column:A-start 4/span A-start 2; top:0em"></y>
|
||||
<y style="grid-column:A-start 5/span A-start 2; top:1em"></y>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,95 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Masonry Test: getComputedStyle().gridTemplateColumns</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-template-columns">
|
||||
<meta name="assert" content="grid-template-columns computed value is the keyword none or a computed track list.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/support/computed-testcommon.js"></script>
|
||||
<style>
|
||||
#target {
|
||||
display: grid;
|
||||
grid-template-rows: masonry;
|
||||
font-size: 40px;
|
||||
min-width: 200px;
|
||||
width: 300px;
|
||||
max-width: 400px;
|
||||
min-height: 500px;
|
||||
height: 600px;
|
||||
max-height: 700px;
|
||||
}
|
||||
#child {
|
||||
min-width: 20px;
|
||||
width: 30px;
|
||||
max-width: 40px;
|
||||
min-height: 50px;
|
||||
height: 60px;
|
||||
max-height: 70px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="container">
|
||||
<div id="target">
|
||||
<div id="child"></div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
test_computed_value("grid-template-rows", 'masonry', 'masonry');
|
||||
test_computed_value("grid-template-columns", 'none', 'none'); // "none" without #child
|
||||
|
||||
// track-size <fixed-breadth> = <length-percentage> | <flex> | min-content | max-content | auto
|
||||
test_computed_value("grid-template-columns", '20%', '60px'); // 20% * width
|
||||
test_computed_value("grid-template-columns", 'calc(-0.5em + 10px)', '0px');
|
||||
test_computed_value("grid-template-columns", 'calc(0.5em + 10px)', '30px');
|
||||
test_computed_value("grid-template-columns", 'calc(30% + 40px)', '130px'); // 30% * width + 40px
|
||||
test_computed_value("grid-template-columns", '5fr', '300px'); // width
|
||||
test_computed_value("grid-template-columns", 'min-content', '30px');
|
||||
test_computed_value("grid-template-columns", 'max-content', '30px');
|
||||
test_computed_value("grid-template-columns", 'auto', '300px'); // width
|
||||
|
||||
// track-size minmax( <inflexible-breadth> , <track-breadth> )
|
||||
test_computed_value("grid-template-columns", 'minmax(10px, auto)', '300px'); // width
|
||||
test_computed_value("grid-template-columns", 'minmax(20%, max-content)', '60px'); // 20% * width
|
||||
test_computed_value("grid-template-columns", 'minmax(min-content, calc(-0.5em + 10px))', '30px');
|
||||
test_computed_value("grid-template-columns", 'minmax(auto, 0)', '30px');
|
||||
|
||||
// track-size fit-content( <length-percentage> )
|
||||
test_computed_value("grid-template-columns", 'fit-content(70px)', '30px');
|
||||
test_computed_value("grid-template-columns", 'fit-content(20%)', '30px');
|
||||
test_computed_value("grid-template-columns", 'fit-content(calc(-0.5em + 10px))', '30px');
|
||||
|
||||
// <track-repeat> = repeat( [ <positive-integer> ] , [ <line-names>? <track-size> ]+ <line-names>? )
|
||||
test_computed_value("grid-template-columns", 'repeat(1, 10px)', '10px');
|
||||
test_computed_value("grid-template-columns", 'repeat(1, [one two] 20%)', '[one two] 60px');
|
||||
test_computed_value("grid-template-columns", 'repeat(2, minmax(10px, auto))', '160px 140px');
|
||||
|
||||
test_computed_value("grid-template-columns", 'repeat(2, fit-content(20%) [three four] 30px 40px [five six])',
|
||||
'30px [three four] 30px 40px [five six] 0px [three four] 30px 40px [five six]');
|
||||
|
||||
// <track-list> = [ <line-names>? [ <track-size> | <track-repeat> ] ]+ <line-names>?
|
||||
test_computed_value("grid-template-columns", 'min-content repeat(5, minmax(10px, auto))',
|
||||
'30px 54px 54px 54px 54px 54px');
|
||||
test_computed_value("grid-template-columns", '[] 150px [] 1fr []', '150px 150px');
|
||||
|
||||
// <auto-repeat> = repeat( [ auto-fill | auto-fit ] , [ <line-names>? <fixed-size> ]+ <line-names>? )
|
||||
test_computed_value("grid-template-columns", 'repeat(auto-fill, 200px)', '200px');
|
||||
test_computed_value("grid-template-columns", 'repeat(auto-fit, [one] 20%)',
|
||||
'[one] 60px [one] 0px [one] 0px [one] 0px [one] 0px');
|
||||
test_computed_value("grid-template-columns", 'repeat(auto-fill, minmax(100px, 5fr) [two])',
|
||||
'100px [two] 100px [two] 100px [two]');
|
||||
test_computed_value("grid-template-columns", 'repeat(auto-fit, [three] minmax(max-content, 6em) [four])',
|
||||
'[three] 240px [four]');
|
||||
|
||||
// <auto-track-list> =
|
||||
// [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>?
|
||||
// <auto-repeat>
|
||||
// [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>?
|
||||
|
||||
test_computed_value("grid-template-columns", '[one] repeat(2, minmax(50px, auto)) [two] 30px [three] repeat(auto-fill, 10px) 40px [four five] repeat(2, minmax(200px, auto)) [six]',
|
||||
'[one] 50px 50px [two] 30px [three] 10px 40px [four five] 200px 200px [six]');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,271 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>Reference: Masonry layout intrinsic sizing</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:15px/1 Ahem; padding:0; margin:0;
|
||||
}
|
||||
|
||||
grid {
|
||||
display: inline-grid;
|
||||
gap: 1px 2px;
|
||||
grid-template-columns: repeat(4,auto);
|
||||
grid-auto-rows: 1em;
|
||||
border: 1px solid;
|
||||
padding: 0 1px 0 2px;
|
||||
vertical-align: top;
|
||||
}
|
||||
.fr {
|
||||
grid-template-columns: 1fr 2fr 1fr 1fr;
|
||||
}
|
||||
.mixed {
|
||||
grid-template-columns: 1fr 2fr min-content max-content;
|
||||
}
|
||||
|
||||
item {
|
||||
background-color: #444;
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<grid>
|
||||
<item style="width:2ch">1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item>5</item>
|
||||
</grid>
|
||||
|
||||
<grid style="grid-template-columns: 1ch repeat(3,auto)">
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item style="width:2ch">5</item>
|
||||
</grid>
|
||||
|
||||
<grid>
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item style="width:2ch; grid-column:2">5</item>
|
||||
</grid>
|
||||
|
||||
<grid>
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item style="width:4ch; grid-column:2/span 2">5</item>
|
||||
</grid>
|
||||
|
||||
<grid>
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item style="grid-column:2/span 2">5</item>
|
||||
<item style="width:5ch; grid-column:1/span 3">6</item>
|
||||
</grid>
|
||||
|
||||
|
||||
<grid>
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item style="width:3ch; grid-column:2/span 2">5</item>
|
||||
<item style="width:5ch; grid-column:1/span 3">6</item>
|
||||
</grid>
|
||||
|
||||
<grid>
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item style="grid-column:span 4">5</item>
|
||||
</grid>
|
||||
|
||||
<grid>
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item style="width:6ch; grid-column:span 4">5</item>
|
||||
</grid>
|
||||
|
||||
<grid style="grid-template-columns: repeat(4,1ch)">
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item style="width:6ch; grid-column:span 3">5</item>
|
||||
</grid>
|
||||
|
||||
<!-- ditto with 'fr' sizing -->
|
||||
|
||||
<grid class="fr">
|
||||
<item style="width:2ch">1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item>5</item>
|
||||
</grid>
|
||||
|
||||
<grid class="fr" style="grid-template-columns: 1ch 2fr 1fr 1fr">
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item style="width:2ch">5</item>
|
||||
</grid>
|
||||
|
||||
<grid class="fr">
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item style="width:2ch; grid-column:2">5</item>
|
||||
</grid>
|
||||
|
||||
<grid class="fr">
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item style="width:4ch; grid-column:2/span 2">5</item>
|
||||
</grid>
|
||||
|
||||
<grid class="fr">
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item style="grid-column:2/span 2">5</item>
|
||||
<item style="width:5ch; grid-column:1/span 3">6</item>
|
||||
</grid>
|
||||
|
||||
|
||||
<grid class="fr">
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item style="width:3ch; grid-column:2/span 2">5</item>
|
||||
<item style="width:5ch; grid-column:1/span 3">6</item>
|
||||
</grid>
|
||||
|
||||
<grid class="fr">
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item style="grid-column:span 4">5</item>
|
||||
</grid>
|
||||
|
||||
<grid class="fr">
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item style="width:6ch; grid-column:span 4">5</item>
|
||||
</grid>
|
||||
|
||||
<grid class="fr" style="grid-template-columns: 1ch 2ch 1ch 1ch">
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item style="width:6ch; grid-column:span 3">5</item>
|
||||
</grid>
|
||||
|
||||
|
||||
<!-- ditto with mixed sizing -->
|
||||
|
||||
<grid class="mixed" style="grid-template-columns: 2ch 4ch 1ch 1ch">
|
||||
<item style="width:2ch">1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item>5</item>
|
||||
</grid>
|
||||
|
||||
<grid class="mixed" style="grid-template-columns: 1ch 2ch 1ch 1ch">
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item style="width:2ch">5</item>
|
||||
</grid>
|
||||
|
||||
<grid class="mixed">
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item style="width:2ch; grid-column:2">5</item>
|
||||
</grid>
|
||||
|
||||
<grid class="mixed">
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item style="width:4ch; grid-column:2/span 2">5</item>
|
||||
</grid>
|
||||
|
||||
<grid class="mixed">
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item style="grid-column:2/span 2">5</item>
|
||||
<item style="width:5ch; grid-column:1/span 3">6</item>
|
||||
</grid>
|
||||
|
||||
|
||||
<grid class="mixed">
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item style="width:3ch; grid-column:2/span 2">5</item>
|
||||
<item style="width:5ch; grid-column:1/span 3">6</item>
|
||||
</grid>
|
||||
|
||||
<grid class="mixed">
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item style="grid-column:span 4">5</item>
|
||||
</grid>
|
||||
|
||||
<grid class="mixed">
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item style="width:6ch; grid-column:span 4">5</item>
|
||||
</grid>
|
||||
|
||||
<grid class="mixed" style="grid-template-columns: 1ch 2ch 1ch 1ch">
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item style="width:6ch; grid-column:span 3">5</item>
|
||||
</grid>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,273 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Test: Masonry layout intrinsic sizing</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-2">
|
||||
<link rel="match" href="masonry-intrinsic-sizing-001-ref.html">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:15px/1 Ahem; padding:0; margin:0;
|
||||
}
|
||||
|
||||
grid {
|
||||
display: inline-grid;
|
||||
gap: 1px 2px;
|
||||
grid-template-columns: repeat(4,auto);
|
||||
grid-template-rows: masonry;
|
||||
border: 1px solid;
|
||||
padding: 0 1px 0 2px;
|
||||
vertical-align: top;
|
||||
}
|
||||
.fr {
|
||||
grid-template-columns: 1fr 2fr 1fr 1fr;
|
||||
}
|
||||
.mixed {
|
||||
grid-template-columns: 1fr 2fr min-content max-content;
|
||||
}
|
||||
|
||||
item {
|
||||
background-color: #444;
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<grid>
|
||||
<item style="width:2ch">1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item>5</item>
|
||||
</grid>
|
||||
|
||||
<grid>
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item style="width:2ch">5</item>
|
||||
</grid>
|
||||
|
||||
<grid>
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item style="width:2ch; grid-column:2">5</item>
|
||||
</grid>
|
||||
|
||||
<grid>
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item style="width:4ch; grid-column:2/span 2">5</item>
|
||||
</grid>
|
||||
|
||||
<grid>
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item style="grid-column:2/span 2">5</item>
|
||||
<item style="width:5ch; grid-column:1/span 3">6</item>
|
||||
</grid>
|
||||
|
||||
|
||||
<grid>
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item style="width:3ch; grid-column:2/span 2">5</item>
|
||||
<item style="width:5ch; grid-column:1/span 3">6</item>
|
||||
</grid>
|
||||
|
||||
<grid>
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item style="grid-column:span 4">5</item>
|
||||
</grid>
|
||||
|
||||
<grid>
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item style="width:6ch; grid-column:span 4">5</item>
|
||||
</grid>
|
||||
|
||||
<grid>
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item style="width:6ch; grid-column:span 3">5</item>
|
||||
</grid>
|
||||
|
||||
<!-- ditto with 'fr' sizing -->
|
||||
|
||||
<grid class="fr">
|
||||
<item style="width:2ch">1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item>5</item>
|
||||
</grid>
|
||||
|
||||
<grid class="fr">
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item style="width:2ch">5</item>
|
||||
</grid>
|
||||
|
||||
<grid class="fr">
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item style="width:2ch; grid-column:2">5</item>
|
||||
</grid>
|
||||
|
||||
<grid class="fr">
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item style="width:4ch; grid-column:2/span 2">5</item>
|
||||
</grid>
|
||||
|
||||
<grid class="fr">
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item style="grid-column:2/span 2">5</item>
|
||||
<item style="width:5ch; grid-column:1/span 3">6</item>
|
||||
</grid>
|
||||
|
||||
|
||||
<grid class="fr">
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item style="width:3ch; grid-column:2/span 2">5</item>
|
||||
<item style="width:5ch; grid-column:1/span 3">6</item>
|
||||
</grid>
|
||||
|
||||
<grid class="fr">
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item style="grid-column:span 4">5</item>
|
||||
</grid>
|
||||
|
||||
<grid class="fr">
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item style="width:6ch; grid-column:span 4">5</item>
|
||||
</grid>
|
||||
|
||||
<grid class="fr">
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item style="width:6ch; grid-column:span 3">5</item>
|
||||
</grid>
|
||||
|
||||
|
||||
<!-- ditto with mixed sizing -->
|
||||
|
||||
<grid class="mixed">
|
||||
<item style="width:2ch">1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item>5</item>
|
||||
</grid>
|
||||
|
||||
<grid class="mixed">
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item style="width:2ch">5</item>
|
||||
</grid>
|
||||
|
||||
<grid class="mixed">
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item style="width:2ch; grid-column:2">5</item>
|
||||
</grid>
|
||||
|
||||
<grid class="mixed">
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item style="width:4ch; grid-column:2/span 2">5</item>
|
||||
</grid>
|
||||
|
||||
<grid class="mixed">
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item style="grid-column:2/span 2">5</item>
|
||||
<item style="width:5ch; grid-column:1/span 3">6</item>
|
||||
</grid>
|
||||
|
||||
|
||||
<grid class="mixed">
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item style="width:3ch; grid-column:2/span 2">5</item>
|
||||
<item style="width:5ch; grid-column:1/span 3">6</item>
|
||||
</grid>
|
||||
|
||||
<grid class="mixed">
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item style="grid-column:span 4">5</item>
|
||||
</grid>
|
||||
|
||||
<grid class="mixed">
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item style="width:6ch; grid-column:span 4">5</item>
|
||||
</grid>
|
||||
|
||||
<grid class="mixed">
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item style="width:6ch; grid-column:span 3">5</item>
|
||||
</grid>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,272 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>Reference: Masonry layout intrinsic sizing</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:15px/1 Ahem; padding:0; margin:0;
|
||||
}
|
||||
|
||||
grid {
|
||||
display: inline-grid;
|
||||
gap: 1px 2px;
|
||||
grid-template-columns: repeat(4,auto);
|
||||
grid-auto-rows: 1em;
|
||||
border: 1px solid;
|
||||
padding: 0 1px 0 2px;
|
||||
vertical-align: top;
|
||||
width: min-content;
|
||||
}
|
||||
.fr {
|
||||
grid-template-columns: 1fr 2fr 1fr 1fr;
|
||||
}
|
||||
.mixed {
|
||||
grid-template-columns: 1fr 2fr min-content max-content;
|
||||
}
|
||||
|
||||
item {
|
||||
background-color: #444;
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<grid>
|
||||
<item style="width:2ch">1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item>5</item>
|
||||
</grid>
|
||||
|
||||
<grid style="grid-template-columns: 1ch repeat(3,auto)">
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item style="width:2ch">5</item>
|
||||
</grid>
|
||||
|
||||
<grid>
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item style="width:2ch; grid-column:2">5</item>
|
||||
</grid>
|
||||
|
||||
<grid>
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item style="width:4ch; grid-column:2/span 2">5</item>
|
||||
</grid>
|
||||
|
||||
<grid>
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item style="grid-column:2/span 2">5</item>
|
||||
<item style="width:5ch; grid-column:1/span 3">6</item>
|
||||
</grid>
|
||||
|
||||
|
||||
<grid>
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item style="width:3ch; grid-column:2/span 2">5</item>
|
||||
<item style="width:5ch; grid-column:1/span 3">6</item>
|
||||
</grid>
|
||||
|
||||
<grid>
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item style="grid-column:span 4">5</item>
|
||||
</grid>
|
||||
|
||||
<grid>
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item style="width:6ch; grid-column:span 4">5</item>
|
||||
</grid>
|
||||
|
||||
<grid style="grid-template-columns: repeat(4,1ch)">
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item style="width:6ch; grid-column:span 3">5</item>
|
||||
</grid>
|
||||
|
||||
<!-- ditto with 'fr' sizing -->
|
||||
|
||||
<grid class="fr">
|
||||
<item style="width:2ch">1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item>5</item>
|
||||
</grid>
|
||||
|
||||
<grid class="fr" style="grid-template-columns: 1ch 2fr 1fr 1fr">
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item style="width:2ch">5</item>
|
||||
</grid>
|
||||
|
||||
<grid class="fr">
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item style="width:2ch; grid-column:2">5</item>
|
||||
</grid>
|
||||
|
||||
<grid class="fr">
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item style="width:4ch; grid-column:2/span 2">5</item>
|
||||
</grid>
|
||||
|
||||
<grid class="fr">
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item style="grid-column:2/span 2">5</item>
|
||||
<item style="width:5ch; grid-column:1/span 3">6</item>
|
||||
</grid>
|
||||
|
||||
|
||||
<grid class="fr">
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item style="width:3ch; grid-column:2/span 2">5</item>
|
||||
<item style="width:5ch; grid-column:1/span 3">6</item>
|
||||
</grid>
|
||||
|
||||
<grid class="fr">
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item style="grid-column:span 4">5</item>
|
||||
</grid>
|
||||
|
||||
<grid class="fr">
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item style="width:6ch; grid-column:span 4">5</item>
|
||||
</grid>
|
||||
|
||||
<grid class="fr" style="grid-template-columns: 1ch 1ch 1ch 1ch">
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item style="width:6ch; grid-column:span 3">5</item>
|
||||
</grid>
|
||||
|
||||
|
||||
<!-- ditto with mixed sizing -->
|
||||
|
||||
<grid class="mixed" style="grid-template-columns: 2ch 1ch 1ch 1ch">
|
||||
<item style="width:2ch">1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item>5</item>
|
||||
</grid>
|
||||
|
||||
<grid class="mixed" style="grid-template-columns: 1ch 1ch 1ch 1ch">
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item style="width:2ch">5</item>
|
||||
</grid>
|
||||
|
||||
<grid class="mixed">
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item style="width:2ch; grid-column:2">5</item>
|
||||
</grid>
|
||||
|
||||
<grid class="mixed">
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item style="width:4ch; grid-column:2/span 2">5</item>
|
||||
</grid>
|
||||
|
||||
<grid class="mixed">
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item style="grid-column:2/span 2">5</item>
|
||||
<item style="width:5ch; grid-column:1/span 3">6</item>
|
||||
</grid>
|
||||
|
||||
|
||||
<grid class="mixed">
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item style="width:3ch; grid-column:2/span 2">5</item>
|
||||
<item style="width:5ch; grid-column:1/span 3">6</item>
|
||||
</grid>
|
||||
|
||||
<grid class="mixed">
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item style="grid-column:span 4">5</item>
|
||||
</grid>
|
||||
|
||||
<grid class="mixed">
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item style="width:6ch; grid-column:span 4">5</item>
|
||||
</grid>
|
||||
|
||||
<grid class="mixed" style="grid-template-columns: 1ch 1ch 1ch 1ch">
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item style="width:6ch; grid-column:span 3">5</item>
|
||||
</grid>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,274 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Test: Masonry layout intrinsic sizing</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-2">
|
||||
<link rel="match" href="masonry-intrinsic-sizing-002-ref.html">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:15px/1 Ahem; padding:0; margin:0;
|
||||
}
|
||||
|
||||
grid {
|
||||
display: inline-grid;
|
||||
gap: 1px 2px;
|
||||
grid-template-columns: repeat(4,auto);
|
||||
grid-template-rows: masonry;
|
||||
border: 1px solid;
|
||||
padding: 0 1px 0 2px;
|
||||
vertical-align: top;
|
||||
width: min-content;
|
||||
}
|
||||
.fr {
|
||||
grid-template-columns: 1fr 2fr 1fr 1fr;
|
||||
}
|
||||
.mixed {
|
||||
grid-template-columns: 1fr 2fr min-content max-content;
|
||||
}
|
||||
|
||||
item {
|
||||
background-color: #444;
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<grid>
|
||||
<item style="width:2ch">1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item>5</item>
|
||||
</grid>
|
||||
|
||||
<grid>
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item style="width:2ch">5</item>
|
||||
</grid>
|
||||
|
||||
<grid>
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item style="width:2ch; grid-column:2">5</item>
|
||||
</grid>
|
||||
|
||||
<grid>
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item style="width:4ch; grid-column:2/span 2">5</item>
|
||||
</grid>
|
||||
|
||||
<grid>
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item style="grid-column:2/span 2">5</item>
|
||||
<item style="width:5ch; grid-column:1/span 3">6</item>
|
||||
</grid>
|
||||
|
||||
|
||||
<grid>
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item style="width:3ch; grid-column:2/span 2">5</item>
|
||||
<item style="width:5ch; grid-column:1/span 3">6</item>
|
||||
</grid>
|
||||
|
||||
<grid>
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item style="grid-column:span 4">5</item>
|
||||
</grid>
|
||||
|
||||
<grid>
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item style="width:6ch; grid-column:span 4">5</item>
|
||||
</grid>
|
||||
|
||||
<grid>
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item style="width:6ch; grid-column:span 3">5</item>
|
||||
</grid>
|
||||
|
||||
<!-- ditto with 'fr' sizing -->
|
||||
|
||||
<grid class="fr">
|
||||
<item style="width:2ch">1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item>5</item>
|
||||
</grid>
|
||||
|
||||
<grid class="fr">
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item style="width:2ch">5</item>
|
||||
</grid>
|
||||
|
||||
<grid class="fr">
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item style="width:2ch; grid-column:2">5</item>
|
||||
</grid>
|
||||
|
||||
<grid class="fr">
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item style="width:4ch; grid-column:2/span 2">5</item>
|
||||
</grid>
|
||||
|
||||
<grid class="fr">
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item style="grid-column:2/span 2">5</item>
|
||||
<item style="width:5ch; grid-column:1/span 3">6</item>
|
||||
</grid>
|
||||
|
||||
|
||||
<grid class="fr">
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item style="width:3ch; grid-column:2/span 2">5</item>
|
||||
<item style="width:5ch; grid-column:1/span 3">6</item>
|
||||
</grid>
|
||||
|
||||
<grid class="fr">
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item style="grid-column:span 4">5</item>
|
||||
</grid>
|
||||
|
||||
<grid class="fr">
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item style="width:6ch; grid-column:span 4">5</item>
|
||||
</grid>
|
||||
|
||||
<grid class="fr">
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item style="width:6ch; grid-column:span 3">5</item>
|
||||
</grid>
|
||||
|
||||
|
||||
<!-- ditto with mixed sizing -->
|
||||
|
||||
<grid class="mixed">
|
||||
<item style="width:2ch">1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item>5</item>
|
||||
</grid>
|
||||
|
||||
<grid class="mixed">
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item style="width:2ch">5</item>
|
||||
</grid>
|
||||
|
||||
<grid class="mixed">
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item style="width:2ch; grid-column:2">5</item>
|
||||
</grid>
|
||||
|
||||
<grid class="mixed">
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item style="width:4ch; grid-column:2/span 2">5</item>
|
||||
</grid>
|
||||
|
||||
<grid class="mixed">
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item style="grid-column:2/span 2">5</item>
|
||||
<item style="width:5ch; grid-column:1/span 3">6</item>
|
||||
</grid>
|
||||
|
||||
|
||||
<grid class="mixed">
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item style="width:3ch; grid-column:2/span 2">5</item>
|
||||
<item style="width:5ch; grid-column:1/span 3">6</item>
|
||||
</grid>
|
||||
|
||||
<grid class="mixed">
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item style="grid-column:span 4">5</item>
|
||||
</grid>
|
||||
|
||||
<grid class="mixed">
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item style="width:6ch; grid-column:span 4">5</item>
|
||||
</grid>
|
||||
|
||||
<grid class="mixed">
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item style="width:6ch; grid-column:span 3">5</item>
|
||||
</grid>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,269 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>Reference: Masonry layout min-content sizing</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:15px/1 Ahem; padding:0; margin:0;
|
||||
}
|
||||
|
||||
grid {
|
||||
display: inline-grid;
|
||||
gap: 1px 2px;
|
||||
grid-template-columns: repeat(4,auto);
|
||||
grid-auto-rows: 1em;
|
||||
border: 1px solid;
|
||||
padding: 0 1px 0 2px;
|
||||
vertical-align: top;
|
||||
width: min-content;
|
||||
}
|
||||
.fr {
|
||||
grid-template-columns: 1fr 2fr 1fr 1fr;
|
||||
}
|
||||
.mixed {
|
||||
grid-template-columns: 1fr 2fr min-content max-content;
|
||||
}
|
||||
|
||||
item {
|
||||
background-color: #444;
|
||||
color: blue;
|
||||
}
|
||||
item.start { align-self: start; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<grid style="grid-template-rows: 1em 2em">
|
||||
<item style="width:2ch">1</item>
|
||||
<item>2 2</item>
|
||||
<item>3 3</item>
|
||||
<item>4</item>
|
||||
<item>5 5</item>
|
||||
</grid>
|
||||
|
||||
<grid style="grid: 1em 2em / 1ch repeat(3,auto); ">
|
||||
<item>1</item>
|
||||
<item>2 2</item>
|
||||
<item>3 3</item>
|
||||
<item>4</item>
|
||||
<item style="width:2ch">5 5</item>
|
||||
</grid>
|
||||
|
||||
<grid style="grid-template-rows: 2em 2em">
|
||||
<item class="start">1</item>
|
||||
<item>2 2</item>
|
||||
<item>3 3</item>
|
||||
<item class="start">4</item>
|
||||
<item style="width:2ch; grid-column:2">5 5</item>
|
||||
</grid>
|
||||
|
||||
<grid style="grid-template-rows: 2em 1em">
|
||||
<item class="start">1</item>
|
||||
<item>2 2</item>
|
||||
<item>3 3</item>
|
||||
<item class="start">4</item>
|
||||
<item style="width:4ch; grid-column:2/span 2">5 5</item>
|
||||
</grid>
|
||||
|
||||
<grid style="grid-template-rows: 2em 1em">
|
||||
<item class="start">1</item>
|
||||
<item>2 2</item>
|
||||
<item>3 3</item>
|
||||
<item class="start">4</item>
|
||||
<item style="grid-column:2/span 2">5 5</item>
|
||||
<item style="width:5ch; grid-column:1/span 3">6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="grid-template-rows: 2em 1em">
|
||||
<item class="start">1</item>
|
||||
<item>2 2</item>
|
||||
<item>3 3</item>
|
||||
<item class="start">4</item>
|
||||
<item style="width:3ch; grid-column:2/span 2">5 5</item>
|
||||
<item style="width:5ch; grid-column:1/span 3">6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="grid-template-rows: 2em 1em">
|
||||
<item class="start">1</item>
|
||||
<item>2 2</item>
|
||||
<item>3 3</item>
|
||||
<item class="start">4</item>
|
||||
<item style="grid-column:span 4">5 5</item>
|
||||
</grid>
|
||||
|
||||
<grid style="grid-template-rows: 2em 1em">
|
||||
<item class="start">1</item>
|
||||
<item>2 2</item>
|
||||
<item>3 3</item>
|
||||
<item class="start">4</item>
|
||||
<item style="width:6ch; grid-column:span 4">5 5</item>
|
||||
</grid>
|
||||
|
||||
<grid style="grid: 2em 1em / repeat(4,1ch)">
|
||||
<item class="start">1</item>
|
||||
<item>2 2</item>
|
||||
<item>3 3</item>
|
||||
<item class="start">4</item>
|
||||
<item style="width:6ch; grid-column:span 3">5 5</item>
|
||||
</grid>
|
||||
|
||||
<!-- ditto with 'fr' sizing -->
|
||||
|
||||
<grid class="fr" style="grid: 1em 2em / 2ch 2fr 1fr 1fr">
|
||||
<item style="width:2ch" class="start">1</item>
|
||||
<item>2 2</item>
|
||||
<item>3 3</item>
|
||||
<item class="start">4</item>
|
||||
<item>5 5</item>
|
||||
</grid>
|
||||
|
||||
<grid class="fr" style="grid: 1em 2em / repeat(4,1ch)">
|
||||
<item class="start">1</item>
|
||||
<item>2 2</item>
|
||||
<item>3 3</item>
|
||||
<item class="start">4</item>
|
||||
<item style="width:2ch">5 5</item>
|
||||
</grid>
|
||||
|
||||
<grid class="fr" style="grid: 2em 2em / 1ch 2ch repeat(2,1ch)">
|
||||
<item class="start">1</item>
|
||||
<item>2 2</item>
|
||||
<item>3 3</item>
|
||||
<item class="start">4</item>
|
||||
<item style="width:2ch; grid-column:2">5 5</item>
|
||||
</grid>
|
||||
|
||||
<grid class="fr" style="grid: 2em 1em / repeat(4,1ch)">
|
||||
<item class="start">1</item>
|
||||
<item>2 2</item>
|
||||
<item>3 3</item>
|
||||
<item class="start">4</item>
|
||||
<item style="width:4ch; grid-column:2/span 2">5 5</item>
|
||||
</grid>
|
||||
|
||||
<grid class="fr" style="grid: 2em 2em / repeat(4,1ch)">
|
||||
<item class="start">1</item>
|
||||
<item>2 2</item>
|
||||
<item>3 3</item>
|
||||
<item class="start">4</item>
|
||||
<item style="grid-column:2/span 2">5 5</item>
|
||||
<item style="width:5ch; grid-column:1/span 3">6</item>
|
||||
</grid>
|
||||
|
||||
<grid class="fr" style="grid: 2em / repeat(4,1ch)">
|
||||
<item class="start">1</item>
|
||||
<item>2 2</item>
|
||||
<item>3 3</item>
|
||||
<item class="start">4</item>
|
||||
<item style="width:3ch; grid-column:2/span 2">5 5</item>
|
||||
<item style="width:5ch; grid-column:1/span 3">6</item>
|
||||
</grid>
|
||||
|
||||
<grid class="fr" style="grid: 2em / repeat(4,1ch)">
|
||||
<item class="start">1</item>
|
||||
<item>2 2</item>
|
||||
<item>3 3</item>
|
||||
<item class="start">4</item>
|
||||
<item style="grid-column:span 4">5 5</item>
|
||||
</grid>
|
||||
|
||||
<grid class="fr" style="grid: 2em / repeat(4,1ch)">
|
||||
<item class="start">1</item>
|
||||
<item>2 2</item>
|
||||
<item>3 3</item>
|
||||
<item class="start">4</item>
|
||||
<item style="width:6ch; grid-column:span 4">5 5</item>
|
||||
</grid>
|
||||
|
||||
<grid class="fr" style="grid: 2em / repeat(4,1ch)">
|
||||
<item class="start">1</item>
|
||||
<item>2 2</item>
|
||||
<item>3 3</item>
|
||||
<item class="start">4</item>
|
||||
<item style="width:6ch; grid-column:span 3">5 5</item>
|
||||
</grid>
|
||||
|
||||
<!-- ditto with mixed sizing -->
|
||||
|
||||
<grid class="mixed" style="grid: 1em 2em / 2ch repeat(3,1ch)">
|
||||
<item style="width:2ch" class="start">1</item>
|
||||
<item>2 2</item>
|
||||
<item>3 3</item>
|
||||
<item class="start">4</item>
|
||||
<item>5 5</item>
|
||||
</grid>
|
||||
|
||||
<grid class="mixed" style="grid: 1em 2em / repeat(4,1ch)">
|
||||
<item class="start">1</item>
|
||||
<item>2 2</item>
|
||||
<item>3 3</item>
|
||||
<item class="start">4</item>
|
||||
<item style="width:2ch">5 5</item>
|
||||
</grid>
|
||||
|
||||
<grid class="mixed" style="grid: 2em 2em / 1ch 2ch repeat(2,1ch)">
|
||||
<item class="start">1</item>
|
||||
<item>2 2</item>
|
||||
<item>3 3</item>
|
||||
<item class="start">4</item>
|
||||
<item style="width:2ch; grid-column:2">5 5</item>
|
||||
</grid>
|
||||
|
||||
<grid class="mixed" style="grid: 2em 1em / repeat(4,1ch)">
|
||||
<item class="start">1</item>
|
||||
<item>2 2</item>
|
||||
<item>3 3</item>
|
||||
<item class="start">4</item>
|
||||
<item style="width:4ch; grid-column:2/span 2">5 5</item>
|
||||
</grid>
|
||||
|
||||
<grid class="mixed" style="grid: 2em 2em / repeat(4,1ch)">
|
||||
<item class="start">1</item>
|
||||
<item>2 2</item>
|
||||
<item>3 3</item>
|
||||
<item class="start">4</item>
|
||||
<item style="grid-column:2/span 2">5 5</item>
|
||||
<item style="width:5ch; grid-column:1/span 3">6</item>
|
||||
</grid>
|
||||
|
||||
<grid class="mixed" style="grid: 2em / repeat(4,1ch)">
|
||||
<item class="start">1</item>
|
||||
<item>2 2</item>
|
||||
<item>3 3</item>
|
||||
<item class="start">4</item>
|
||||
<item style="width:3ch; grid-column:2/span 2">5 5</item>
|
||||
<item style="width:5ch; grid-column:1/span 3">6</item>
|
||||
</grid>
|
||||
|
||||
<grid class="mixed" style="grid: 2em / repeat(4,1ch)">
|
||||
<item class="start">1</item>
|
||||
<item>2 2</item>
|
||||
<item>3 3</item>
|
||||
<item class="start">4</item>
|
||||
<item style="grid-column:span 4">5 5</item>
|
||||
</grid>
|
||||
|
||||
<grid class="mixed" style="grid: 2em / repeat(4,1ch)">
|
||||
<item class="start">1</item>
|
||||
<item>2 2</item>
|
||||
<item>3 3</item>
|
||||
<item class="start">4</item>
|
||||
<item style="width:6ch; grid-column:span 4">5 5</item>
|
||||
</grid>
|
||||
|
||||
<grid class="mixed" style="grid: 2em / repeat(4,1ch)">
|
||||
<item class="start">1</item>
|
||||
<item>2 2</item>
|
||||
<item>3 3</item>
|
||||
<item class="start">4</item>
|
||||
<item style="width:6ch; grid-column:span 3">5 5</item>
|
||||
</grid>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,270 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Test: Masonry layout min-content sizing</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-2">
|
||||
<link rel="match" href="masonry-intrinsic-sizing-003-ref.html">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:15px/1 Ahem; padding:0; margin:0;
|
||||
}
|
||||
|
||||
grid {
|
||||
display: inline-grid;
|
||||
gap: 1px 2px;
|
||||
grid-template-columns: repeat(4,auto);
|
||||
grid-template-rows: masonry;
|
||||
border: 1px solid;
|
||||
padding: 0 1px 0 2px;
|
||||
vertical-align: top;
|
||||
width: min-content;
|
||||
}
|
||||
.fr {
|
||||
grid-template-columns: 1fr 2fr 1fr 1fr;
|
||||
}
|
||||
.mixed {
|
||||
grid-template-columns: 1fr 2fr min-content max-content;
|
||||
}
|
||||
|
||||
item {
|
||||
background-color: #444;
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<grid>
|
||||
<item style="width:2ch">1</item>
|
||||
<item>2 2</item>
|
||||
<item>3 3</item>
|
||||
<item>4</item>
|
||||
<item>5 5</item>
|
||||
</grid>
|
||||
|
||||
<grid>
|
||||
<item>1</item>
|
||||
<item>2 2</item>
|
||||
<item>3 3</item>
|
||||
<item>4</item>
|
||||
<item style="width:2ch">5 5</item>
|
||||
</grid>
|
||||
|
||||
<grid>
|
||||
<item>1</item>
|
||||
<item>2 2</item>
|
||||
<item>3 3</item>
|
||||
<item>4</item>
|
||||
<item style="width:2ch; grid-column:2">5 5</item>
|
||||
</grid>
|
||||
|
||||
<grid>
|
||||
<item>1</item>
|
||||
<item>2 2</item>
|
||||
<item>3 3</item>
|
||||
<item>4</item>
|
||||
<item style="width:4ch; grid-column:2/span 2">5 5</item>
|
||||
</grid>
|
||||
|
||||
<grid>
|
||||
<item>1</item>
|
||||
<item>2 2</item>
|
||||
<item>3 3</item>
|
||||
<item>4</item>
|
||||
<item style="grid-column:2/span 2">5 5</item>
|
||||
<item style="width:5ch; grid-column:1/span 3">6</item>
|
||||
</grid>
|
||||
|
||||
<grid>
|
||||
<item>1</item>
|
||||
<item>2 2</item>
|
||||
<item>3 3</item>
|
||||
<item>4</item>
|
||||
<item style="width:3ch; grid-column:2/span 2">5 5</item>
|
||||
<item style="width:5ch; grid-column:1/span 3">6</item>
|
||||
</grid>
|
||||
|
||||
<grid>
|
||||
<item>1</item>
|
||||
<item>2 2</item>
|
||||
<item>3 3</item>
|
||||
<item>4</item>
|
||||
<item style="grid-column:span 4">5 5</item>
|
||||
</grid>
|
||||
|
||||
<grid>
|
||||
<item>1</item>
|
||||
<item>2 2</item>
|
||||
<item>3 3</item>
|
||||
<item>4</item>
|
||||
<item style="width:6ch; grid-column:span 4">5 5</item>
|
||||
</grid>
|
||||
|
||||
<grid>
|
||||
<item>1</item>
|
||||
<item>2 2</item>
|
||||
<item>3 3</item>
|
||||
<item>4</item>
|
||||
<item style="width:6ch; grid-column:span 3">5 5</item>
|
||||
</grid>
|
||||
|
||||
<!-- ditto with 'fr' sizing -->
|
||||
|
||||
<grid class="fr">
|
||||
<item style="width:2ch">1</item>
|
||||
<item>2 2</item>
|
||||
<item>3 3</item>
|
||||
<item>4</item>
|
||||
<item>5 5</item>
|
||||
</grid>
|
||||
|
||||
<grid class="fr">
|
||||
<item>1</item>
|
||||
<item>2 2</item>
|
||||
<item>3 3</item>
|
||||
<item>4</item>
|
||||
<item style="width:2ch">5 5</item>
|
||||
</grid>
|
||||
|
||||
<grid class="fr">
|
||||
<item>1</item>
|
||||
<item>2 2</item>
|
||||
<item>3 3</item>
|
||||
<item>4</item>
|
||||
<item style="width:2ch; grid-column:2">5 5</item>
|
||||
</grid>
|
||||
|
||||
<grid class="fr">
|
||||
<item>1</item>
|
||||
<item>2 2</item>
|
||||
<item>3 3</item>
|
||||
<item>4</item>
|
||||
<item style="width:4ch; grid-column:2/span 2">5 5</item>
|
||||
</grid>
|
||||
|
||||
<grid class="fr">
|
||||
<item>1</item>
|
||||
<item>2 2</item>
|
||||
<item>3 3</item>
|
||||
<item>4</item>
|
||||
<item style="grid-column:2/span 2">5 5</item>
|
||||
<item style="width:5ch; grid-column:1/span 3">6</item>
|
||||
</grid>
|
||||
|
||||
<grid class="fr">
|
||||
<item>1</item>
|
||||
<item>2 2</item>
|
||||
<item>3 3</item>
|
||||
<item>4</item>
|
||||
<item style="width:3ch; grid-column:2/span 2">5 5</item>
|
||||
<item style="width:5ch; grid-column:1/span 3">6</item>
|
||||
</grid>
|
||||
|
||||
<grid class="fr">
|
||||
<item>1</item>
|
||||
<item>2 2</item>
|
||||
<item>3 3</item>
|
||||
<item>4</item>
|
||||
<item style="grid-column:span 4">5 5</item>
|
||||
</grid>
|
||||
|
||||
<grid class="fr">
|
||||
<item>1</item>
|
||||
<item>2 2</item>
|
||||
<item>3 3</item>
|
||||
<item>4</item>
|
||||
<item style="width:6ch; grid-column:span 4">5 5</item>
|
||||
</grid>
|
||||
|
||||
<grid class="fr">
|
||||
<item>1</item>
|
||||
<item>2 2</item>
|
||||
<item>3 3</item>
|
||||
<item>4</item>
|
||||
<item style="width:6ch; grid-column:span 3">5 5</item>
|
||||
</grid>
|
||||
|
||||
<!-- ditto with mixed sizing -->
|
||||
|
||||
<grid class="mixed">
|
||||
<item style="width:2ch">1</item>
|
||||
<item>2 2</item>
|
||||
<item>3 3</item>
|
||||
<item>4</item>
|
||||
<item>5 5</item>
|
||||
</grid>
|
||||
|
||||
<grid class="mixed">
|
||||
<item>1</item>
|
||||
<item>2 2</item>
|
||||
<item>3 3</item>
|
||||
<item>4</item>
|
||||
<item style="width:2ch">5 5</item>
|
||||
</grid>
|
||||
|
||||
<grid class="mixed">
|
||||
<item>1</item>
|
||||
<item>2 2</item>
|
||||
<item>3 3</item>
|
||||
<item>4</item>
|
||||
<item style="width:2ch; grid-column:2">5 5</item>
|
||||
</grid>
|
||||
|
||||
<grid class="mixed">
|
||||
<item>1</item>
|
||||
<item>2 2</item>
|
||||
<item>3 3</item>
|
||||
<item>4</item>
|
||||
<item style="width:4ch; grid-column:2/span 2">5 5</item>
|
||||
</grid>
|
||||
|
||||
<grid class="mixed">
|
||||
<item>1</item>
|
||||
<item>2 2</item>
|
||||
<item>3 3</item>
|
||||
<item>4</item>
|
||||
<item style="grid-column:2/span 2">5 5</item>
|
||||
<item style="width:5ch; grid-column:1/span 3">6</item>
|
||||
</grid>
|
||||
|
||||
<grid class="mixed">
|
||||
<item>1</item>
|
||||
<item>2 2</item>
|
||||
<item>3 3</item>
|
||||
<item>4</item>
|
||||
<item style="width:3ch; grid-column:2/span 2">5 5</item>
|
||||
<item style="width:5ch; grid-column:1/span 3">6</item>
|
||||
</grid>
|
||||
|
||||
<grid class="mixed">
|
||||
<item>1</item>
|
||||
<item>2 2</item>
|
||||
<item>3 3</item>
|
||||
<item>4</item>
|
||||
<item style="grid-column:span 4">5 5</item>
|
||||
</grid>
|
||||
|
||||
<grid class="mixed">
|
||||
<item>1</item>
|
||||
<item>2 2</item>
|
||||
<item>3 3</item>
|
||||
<item>4</item>
|
||||
<item style="width:6ch; grid-column:span 4">5 5</item>
|
||||
</grid>
|
||||
|
||||
<grid class="mixed">
|
||||
<item>1</item>
|
||||
<item>2 2</item>
|
||||
<item>3 3</item>
|
||||
<item>4</item>
|
||||
<item style="width:6ch; grid-column:span 3">5 5</item>
|
||||
</grid>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,270 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>Reference: Masonry layout max-content sizing</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:15px/1 Ahem; padding:0; margin:0;
|
||||
}
|
||||
|
||||
grid {
|
||||
display: inline-grid;
|
||||
gap: 1px 2px;
|
||||
grid-template-columns: 1ch 3ch 3ch 1ch;
|
||||
grid-auto-rows: 1em;
|
||||
border: 1px solid;
|
||||
padding: 0 1px 0 2px;
|
||||
vertical-align: top;
|
||||
align-items: start;
|
||||
width: max-content;
|
||||
}
|
||||
.fr {
|
||||
grid-template-columns: 1fr 2fr 1fr 1fr;
|
||||
}
|
||||
.mixed {
|
||||
grid-template-columns: 1fr 2fr min-content max-content;
|
||||
}
|
||||
|
||||
item {
|
||||
background-color: #444;
|
||||
color: blue;
|
||||
}
|
||||
item.start { align-self: start; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<grid style="grid: 1em 2em / 2ch 3ch 3ch 1ch">
|
||||
<item style="width:2ch">1</item>
|
||||
<item>2 2</item>
|
||||
<item>3 3</item>
|
||||
<item>4</item>
|
||||
<item>5 5</item>
|
||||
</grid>
|
||||
|
||||
<grid style="grid: 1em 2em / 1ch 3ch 3ch 1ch; ">
|
||||
<item>1</item>
|
||||
<item>2 2</item>
|
||||
<item>3 3</item>
|
||||
<item>4</item>
|
||||
<item style="width:2ch">5 5</item>
|
||||
</grid>
|
||||
|
||||
<grid style="grid-template-rows: 1em 2em">
|
||||
<item class="start">1</item>
|
||||
<item>2 2</item>
|
||||
<item>3 3</item>
|
||||
<item class="start">4</item>
|
||||
<item style="width:2ch; grid-column:2">5 5</item>
|
||||
</grid>
|
||||
|
||||
<grid>
|
||||
<item class="start">1</item>
|
||||
<item>2 2</item>
|
||||
<item>3 3</item>
|
||||
<item class="start">4</item>
|
||||
<item style="width:4ch; grid-column:2/span 2">5 5</item>
|
||||
</grid>
|
||||
|
||||
<grid>
|
||||
<item class="start">1</item>
|
||||
<item>2 2</item>
|
||||
<item>3 3</item>
|
||||
<item class="start">4</item>
|
||||
<item style="grid-column:2/span 2">5 5</item>
|
||||
<item style="width:5ch; grid-column:1/span 3">6</item>
|
||||
</grid>
|
||||
|
||||
<grid>
|
||||
<item class="start">1</item>
|
||||
<item>2 2</item>
|
||||
<item>3 3</item>
|
||||
<item class="start">4</item>
|
||||
<item style="width:3ch; grid-column:2/span 2">5 5</item>
|
||||
<item style="width:5ch; grid-column:1/span 3">6</item>
|
||||
</grid>
|
||||
|
||||
<grid>
|
||||
<item class="start">1</item>
|
||||
<item>2 2</item>
|
||||
<item>3 3</item>
|
||||
<item class="start">4</item>
|
||||
<item style="grid-column:span 4">5 5</item>
|
||||
</grid>
|
||||
|
||||
<grid>
|
||||
<item class="start">1</item>
|
||||
<item>2 2</item>
|
||||
<item>3 3</item>
|
||||
<item class="start">4</item>
|
||||
<item style="width:6ch; grid-column:span 4">5 5</item>
|
||||
</grid>
|
||||
|
||||
<grid>
|
||||
<item class="start">1</item>
|
||||
<item>2 2</item>
|
||||
<item>3 3</item>
|
||||
<item class="start">4</item>
|
||||
<item style="width:6ch; grid-column:span 3">5 5</item>
|
||||
</grid>
|
||||
|
||||
<!-- ditto with 'fr' sizing -->
|
||||
|
||||
<grid class="fr">
|
||||
<item style="width:2ch" class="start">1</item>
|
||||
<item>2 2</item>
|
||||
<item>3 3</item>
|
||||
<item class="start">4</item>
|
||||
<item>5 5</item>
|
||||
</grid>
|
||||
|
||||
<grid class="fr" style="grid: 1em 2em / 3ch 6ch 3ch 3ch">
|
||||
<item class="start">1</item>
|
||||
<item>2 2</item>
|
||||
<item>3 3</item>
|
||||
<item class="start">4</item>
|
||||
<item style="width:2ch">5 5</item>
|
||||
</grid>
|
||||
|
||||
<grid class="fr" style="grid: 1em 2em / 3ch 6ch 3ch 3ch">
|
||||
<item class="start">1</item>
|
||||
<item>2 2</item>
|
||||
<item>3 3</item>
|
||||
<item class="start">4</item>
|
||||
<item style="width:2ch; grid-column:2">5 5</item>
|
||||
</grid>
|
||||
|
||||
<grid class="fr">
|
||||
<item class="start">1</item>
|
||||
<item>2 2</item>
|
||||
<item>3 3</item>
|
||||
<item class="start">4</item>
|
||||
<item style="width:4ch; grid-column:2/span 2">5 5</item>
|
||||
</grid>
|
||||
|
||||
<grid class="fr">
|
||||
<item class="start">1</item>
|
||||
<item>2 2</item>
|
||||
<item>3 3</item>
|
||||
<item class="start">4</item>
|
||||
<item style="grid-column:2/span 2">5 5</item>
|
||||
<item style="width:5ch; grid-column:1/span 3">6</item>
|
||||
</grid>
|
||||
|
||||
<grid class="fr">
|
||||
<item class="start">1</item>
|
||||
<item>2 2</item>
|
||||
<item>3 3</item>
|
||||
<item class="start">4</item>
|
||||
<item style="width:3ch; grid-column:2/span 2">5 5</item>
|
||||
<item style="width:5ch; grid-column:1/span 3">6</item>
|
||||
</grid>
|
||||
|
||||
<grid class="fr">
|
||||
<item class="start">1</item>
|
||||
<item>2 2</item>
|
||||
<item>3 3</item>
|
||||
<item class="start">4</item>
|
||||
<item style="grid-column:span 4">5 5</item>
|
||||
</grid>
|
||||
|
||||
<grid class="fr">
|
||||
<item class="start">1</item>
|
||||
<item>2 2</item>
|
||||
<item>3 3</item>
|
||||
<item class="start">4</item>
|
||||
<item style="width:6ch; grid-column:span 4">5 5</item>
|
||||
</grid>
|
||||
|
||||
<grid class="fr">
|
||||
<item class="start">1</item>
|
||||
<item>2 2</item>
|
||||
<item>3 3</item>
|
||||
<item class="start">4</item>
|
||||
<item style="width:6ch; grid-column:span 3">5 5</item>
|
||||
</grid>
|
||||
|
||||
<!-- ditto with mixed sizing -->
|
||||
|
||||
<grid class="mixed" style="grid: 1em 2em / 2ch 4ch 1ch 1ch">
|
||||
<item style="width:2ch" class="start">1</item>
|
||||
<item>2 2</item>
|
||||
<item>3 3</item>
|
||||
<item class="start">4</item>
|
||||
<item>5 5</item>
|
||||
</grid>
|
||||
|
||||
<grid class="mixed" style="grid: 1em 2em / calc(3ch/2) 3ch 1ch 1ch">
|
||||
<item class="start">1</item>
|
||||
<item>2 2</item>
|
||||
<item>3 3</item>
|
||||
<item class="start">4</item>
|
||||
<item style="width:2ch">5 5</item>
|
||||
</grid>
|
||||
|
||||
<grid class="mixed" style="grid: 1em 2em / calc(3ch/2) 3ch 1ch 1ch">
|
||||
<item class="start">1</item>
|
||||
<item>2 2</item>
|
||||
<item>3 3</item>
|
||||
<item class="start">4</item>
|
||||
<item style="width:2ch; grid-column:2">5 5</item>
|
||||
</grid>
|
||||
|
||||
<grid class="mixed" style="grid: 2em 1em / calc(3ch/2) 3ch 1ch 1ch">
|
||||
<item class="start">1</item>
|
||||
<item class="start">2 2</item>
|
||||
<item class="start">3 3</item>
|
||||
<item class="start">4</item>
|
||||
<item style="width:4ch; grid-column:2/span 2">5 5</item>
|
||||
</grid>
|
||||
|
||||
<grid class="mixed" style="grid: 2em 1em 1em / calc(3ch/2) 3ch 1ch 1ch">
|
||||
<item class="start">1</item>
|
||||
<item class="start">2 2</item>
|
||||
<item class="start">3 3</item>
|
||||
<item class="start">4</item>
|
||||
<item style="grid-column:2/span 2">5 5</item>
|
||||
<item style="width:5ch; grid-column:1/span 3">6</item>
|
||||
</grid>
|
||||
|
||||
<grid class="mixed" style="grid: 2em 1em / calc(3ch/2) 3ch 1ch 1ch">
|
||||
<item class="start">1</item>
|
||||
<item class="start">2 2</item>
|
||||
<item class="start">3 3</item>
|
||||
<item class="start">4</item>
|
||||
<item style="width:3ch; grid-column:2/span 2">5 5</item>
|
||||
<item style="width:5ch; grid-column:1/span 3">6</item>
|
||||
</grid>
|
||||
|
||||
<grid class="mixed" style="grid: 2em 1em / calc(3ch/2) 3ch 1ch 1ch">
|
||||
<item class="start">1</item>
|
||||
<item class="start">2 2</item>
|
||||
<item class="start">3 3</item>
|
||||
<item class="start">4</item>
|
||||
<item style="grid-column:span 4">5 5</item>
|
||||
</grid>
|
||||
|
||||
<grid class="mixed" style="grid: 2em 1em / calc(3ch/2) 3ch 1ch 1ch">
|
||||
<item class="start">1</item>
|
||||
<item class="start">2 2</item>
|
||||
<item class="start">3 3</item>
|
||||
<item class="start">4</item>
|
||||
<item style="width:6ch; grid-column:span 4">5 5</item>
|
||||
</grid>
|
||||
|
||||
<grid class="mixed" style="grid: 2em 1em / calc(3ch/2) 3ch 1ch 1ch">
|
||||
<item class="start">1</item>
|
||||
<item class="start">2 2</item>
|
||||
<item class="start">3 3</item>
|
||||
<item class="start">4</item>
|
||||
<item style="width:6ch; grid-column:span 3">5 5</item>
|
||||
</grid>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,270 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Test: Masonry layout max-content sizing</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-2">
|
||||
<link rel="match" href="masonry-intrinsic-sizing-004-ref.html">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:15px/1 Ahem; padding:0; margin:0;
|
||||
}
|
||||
|
||||
grid {
|
||||
display: inline-grid;
|
||||
gap: 1px 2px;
|
||||
grid-template-columns: repeat(4,auto);
|
||||
grid-template-rows: masonry;
|
||||
border: 1px solid;
|
||||
padding: 0 1px 0 2px;
|
||||
vertical-align: top;
|
||||
width: max-content;
|
||||
}
|
||||
.fr {
|
||||
grid-template-columns: 1fr 2fr 1fr 1fr;
|
||||
}
|
||||
.mixed {
|
||||
grid-template-columns: 1fr 2fr min-content max-content;
|
||||
}
|
||||
|
||||
item {
|
||||
background-color: #444;
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<grid>
|
||||
<item style="width:2ch">1</item>
|
||||
<item>2 2</item>
|
||||
<item>3 3</item>
|
||||
<item>4</item>
|
||||
<item>5 5</item>
|
||||
</grid>
|
||||
|
||||
<grid>
|
||||
<item>1</item>
|
||||
<item>2 2</item>
|
||||
<item>3 3</item>
|
||||
<item>4</item>
|
||||
<item style="width:2ch">5 5</item>
|
||||
</grid>
|
||||
|
||||
<grid>
|
||||
<item>1</item>
|
||||
<item>2 2</item>
|
||||
<item>3 3</item>
|
||||
<item>4</item>
|
||||
<item style="width:2ch; grid-column:2">5 5</item>
|
||||
</grid>
|
||||
|
||||
<grid>
|
||||
<item>1</item>
|
||||
<item>2 2</item>
|
||||
<item>3 3</item>
|
||||
<item>4</item>
|
||||
<item style="width:4ch; grid-column:2/span 2">5 5</item>
|
||||
</grid>
|
||||
|
||||
<grid>
|
||||
<item>1</item>
|
||||
<item>2 2</item>
|
||||
<item>3 3</item>
|
||||
<item>4</item>
|
||||
<item style="grid-column:2/span 2">5 5</item>
|
||||
<item style="width:5ch; grid-column:1/span 3">6</item>
|
||||
</grid>
|
||||
|
||||
<grid>
|
||||
<item>1</item>
|
||||
<item>2 2</item>
|
||||
<item>3 3</item>
|
||||
<item>4</item>
|
||||
<item style="width:3ch; grid-column:2/span 2">5 5</item>
|
||||
<item style="width:5ch; grid-column:1/span 3">6</item>
|
||||
</grid>
|
||||
|
||||
<grid>
|
||||
<item>1</item>
|
||||
<item>2 2</item>
|
||||
<item>3 3</item>
|
||||
<item>4</item>
|
||||
<item style="grid-column:span 4">5 5</item>
|
||||
</grid>
|
||||
|
||||
<grid>
|
||||
<item>1</item>
|
||||
<item>2 2</item>
|
||||
<item>3 3</item>
|
||||
<item>4</item>
|
||||
<item style="width:6ch; grid-column:span 4">5 5</item>
|
||||
</grid>
|
||||
|
||||
<grid>
|
||||
<item>1</item>
|
||||
<item>2 2</item>
|
||||
<item>3 3</item>
|
||||
<item>4</item>
|
||||
<item style="width:6ch; grid-column:span 3">5 5</item>
|
||||
</grid>
|
||||
|
||||
<!-- ditto with 'fr' sizing -->
|
||||
|
||||
<grid class="fr">
|
||||
<item style="width:2ch">1</item>
|
||||
<item>2 2</item>
|
||||
<item>3 3</item>
|
||||
<item>4</item>
|
||||
<item>5 5</item>
|
||||
</grid>
|
||||
|
||||
<grid class="fr">
|
||||
<item>1</item>
|
||||
<item>2 2</item>
|
||||
<item>3 3</item>
|
||||
<item>4</item>
|
||||
<item style="width:2ch">5 5</item>
|
||||
</grid>
|
||||
|
||||
<grid class="fr">
|
||||
<item>1</item>
|
||||
<item>2 2</item>
|
||||
<item>3 3</item>
|
||||
<item>4</item>
|
||||
<item style="width:2ch; grid-column:2">5 5</item>
|
||||
</grid>
|
||||
|
||||
<grid class="fr">
|
||||
<item>1</item>
|
||||
<item>2 2</item>
|
||||
<item>3 3</item>
|
||||
<item>4</item>
|
||||
<item style="width:4ch; grid-column:2/span 2">5 5</item>
|
||||
</grid>
|
||||
|
||||
<grid class="fr">
|
||||
<item>1</item>
|
||||
<item>2 2</item>
|
||||
<item>3 3</item>
|
||||
<item>4</item>
|
||||
<item style="grid-column:2/span 2">5 5</item>
|
||||
<item style="width:5ch; grid-column:1/span 3">6</item>
|
||||
</grid>
|
||||
|
||||
<grid class="fr">
|
||||
<item>1</item>
|
||||
<item>2 2</item>
|
||||
<item>3 3</item>
|
||||
<item>4</item>
|
||||
<item style="width:3ch; grid-column:2/span 2">5 5</item>
|
||||
<item style="width:5ch; grid-column:1/span 3">6</item>
|
||||
</grid>
|
||||
|
||||
<grid class="fr">
|
||||
<item>1</item>
|
||||
<item>2 2</item>
|
||||
<item>3 3</item>
|
||||
<item>4</item>
|
||||
<item style="grid-column:span 4">5 5</item>
|
||||
</grid>
|
||||
|
||||
<grid class="fr">
|
||||
<item>1</item>
|
||||
<item>2 2</item>
|
||||
<item>3 3</item>
|
||||
<item>4</item>
|
||||
<item style="width:6ch; grid-column:span 4">5 5</item>
|
||||
</grid>
|
||||
|
||||
<grid class="fr">
|
||||
<item>1</item>
|
||||
<item>2 2</item>
|
||||
<item>3 3</item>
|
||||
<item>4</item>
|
||||
<item style="width:6ch; grid-column:span 3">5 5</item>
|
||||
</grid>
|
||||
|
||||
<!-- ditto with mixed sizing -->
|
||||
|
||||
<grid class="mixed">
|
||||
<item style="width:2ch">1</item>
|
||||
<item>2 2</item>
|
||||
<item>3 3</item>
|
||||
<item>4</item>
|
||||
<item>5 5</item>
|
||||
</grid>
|
||||
|
||||
<grid class="mixed">
|
||||
<item>1</item>
|
||||
<item>2 2</item>
|
||||
<item>3 3</item>
|
||||
<item>4</item>
|
||||
<item style="width:2ch">5 5</item>
|
||||
</grid>
|
||||
|
||||
<grid class="mixed">
|
||||
<item>1</item>
|
||||
<item>2 2</item>
|
||||
<item>3 3</item>
|
||||
<item>4</item>
|
||||
<item style="width:2ch; grid-column:2">5 5</item>
|
||||
</grid>
|
||||
|
||||
<grid class="mixed">
|
||||
<item>1</item>
|
||||
<item>2 2</item>
|
||||
<item>3 3</item>
|
||||
<item>4</item>
|
||||
<item style="width:4ch; grid-column:2/span 2">5 5</item>
|
||||
</grid>
|
||||
|
||||
<grid class="mixed">
|
||||
<item>1</item>
|
||||
<item>2 2</item>
|
||||
<item>3 3</item>
|
||||
<item>4</item>
|
||||
<item style="grid-column:2/span 2">5 5</item>
|
||||
<item style="width:5ch; grid-column:1/span 3">6</item>
|
||||
</grid>
|
||||
|
||||
<grid class="mixed">
|
||||
<item>1</item>
|
||||
<item>2 2</item>
|
||||
<item>3 3</item>
|
||||
<item>4</item>
|
||||
<item style="width:3ch; grid-column:2/span 2">5 5</item>
|
||||
<item style="width:5ch; grid-column:1/span 3">6</item>
|
||||
</grid>
|
||||
|
||||
<grid class="mixed">
|
||||
<item>1</item>
|
||||
<item>2 2</item>
|
||||
<item>3 3</item>
|
||||
<item>4</item>
|
||||
<item style="grid-column:span 4">5 5</item>
|
||||
</grid>
|
||||
|
||||
<grid class="mixed">
|
||||
<item>1</item>
|
||||
<item>2 2</item>
|
||||
<item>3 3</item>
|
||||
<item>4</item>
|
||||
<item style="width:6ch; grid-column:span 4">5 5</item>
|
||||
</grid>
|
||||
|
||||
<grid class="mixed">
|
||||
<item>1</item>
|
||||
<item>2 2</item>
|
||||
<item>3 3</item>
|
||||
<item>4</item>
|
||||
<item style="width:6ch; grid-column:span 3">5 5</item>
|
||||
</grid>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>Reference: Masonry layout intrinsic sizing</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:15px/1 Ahem; padding:0; margin:0;
|
||||
}
|
||||
|
||||
grid {
|
||||
display: inline-grid;
|
||||
gap: 1px 2px;
|
||||
grid-auto-flow: column;
|
||||
border: 1px solid;
|
||||
padding: 0 1px 0 2px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
item {
|
||||
background-color: #444;
|
||||
color: blue;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<grid style="grid-template-rows: 3ch repeat(3,1ch)">
|
||||
<item style="height:3ch">1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item>5 5</item>
|
||||
<item>6</item>
|
||||
<item>7</item>
|
||||
<item>8</item>
|
||||
<item>9 9</item>
|
||||
</grid>
|
||||
|
||||
<grid style="grid-template-rows: repeat(4,1ch)">
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item style="height:3ch">5 5</item>
|
||||
<item>6</item>
|
||||
<item>7</item>
|
||||
<item>8</item>
|
||||
<item>9 9</item>
|
||||
</grid>
|
||||
|
||||
<grid style="grid-template-rows: 3ch repeat(3,1ch)">
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item style="height:3ch; grid-row:1">5 5</item>
|
||||
<item>6</item>
|
||||
<item>7</item>
|
||||
<item>8</item>
|
||||
<item>9 9</item>
|
||||
</grid>
|
||||
|
||||
<grid style="grid-template-rows: 3ch repeat(3,1ch)">
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item style="height:3ch; grid-column:1">5 5</item>
|
||||
<item>6</item>
|
||||
<item>7</item>
|
||||
<item>8</item>
|
||||
<item>9 9</item>
|
||||
</grid>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,86 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Test: Masonry layout intrinsic sizing</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-2">
|
||||
<link rel="match" href="masonry-intrinsic-sizing-005-ref.html">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:15px/1 Ahem; padding:0; margin:0;
|
||||
}
|
||||
|
||||
grid {
|
||||
display: inline-grid;
|
||||
gap: 1px 2px;
|
||||
grid-template-columns: masonry;
|
||||
grid-template-rows: repeat(4,auto);
|
||||
border: 1px solid;
|
||||
padding: 0 1px 0 2px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
item {
|
||||
background-color: #444;
|
||||
color: blue;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<grid>
|
||||
<item style="height:3ch">1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item>5 5</item>
|
||||
<item>6</item>
|
||||
<item>7</item>
|
||||
<item>8</item>
|
||||
<item>9 9</item>
|
||||
</grid>
|
||||
|
||||
<grid>
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item style="height:3ch">5 5</item>
|
||||
<item>6</item>
|
||||
<item>7</item>
|
||||
<item>8</item>
|
||||
<item>9 9</item>
|
||||
</grid>
|
||||
|
||||
<grid>
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item style="height:3ch; grid-row:1">5 5</item>
|
||||
<item>6</item>
|
||||
<item>7</item>
|
||||
<item>8</item>
|
||||
<item>9 9</item>
|
||||
</grid>
|
||||
|
||||
<grid>
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item style="height:3ch; grid-column:1">5 5</item>
|
||||
<item>6</item>
|
||||
<item>7</item>
|
||||
<item>8</item>
|
||||
<item>9 9</item>
|
||||
</grid>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>Reference: Masonry layout intrinsic sizing</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:15px/1 Ahem; padding:0; margin:0;
|
||||
}
|
||||
|
||||
grid {
|
||||
display: inline-grid;
|
||||
gap: 1px 2px;
|
||||
grid-auto-flow: column;
|
||||
grid-template-columns: 1ch;
|
||||
grid-template-rows: repeat(4,1em);
|
||||
border: 1px solid;
|
||||
padding: 0 1px 0 2px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
item {
|
||||
background-color: #444;
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<grid>
|
||||
<item style="width:3ch">1 1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item style="grid-row:2">5 5</item>
|
||||
</grid>
|
||||
|
||||
<grid>
|
||||
<item style="width:3ch">1 1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item style="grid-row:2">5 5</item>
|
||||
</grid>
|
||||
|
||||
<grid style="height:5em">
|
||||
<item style="width:3ch">1 1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item style="grid-row:2">5 5</item>
|
||||
</grid>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Test: Masonry layout intrinsic sizing</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-2">
|
||||
<link rel="match" href="masonry-intrinsic-sizing-006-ref.html">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:15px/1 Ahem; padding:0; margin:0;
|
||||
}
|
||||
|
||||
grid {
|
||||
display: inline-grid;
|
||||
gap: 1px 2px;
|
||||
grid-template-columns: masonry;
|
||||
grid-template-rows: repeat(4,auto);
|
||||
border: 1px solid;
|
||||
padding: 0 1px 0 2px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
item {
|
||||
background-color: #444;
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<grid style="max-height:5em; grid-template-rows: repeat(auto-fill,1em);">
|
||||
<item>1 1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item>5 5</item>
|
||||
</grid>
|
||||
|
||||
<grid style="min-height:4em; grid-template-rows: repeat(auto-fill,1em);">
|
||||
<item>1 1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item>5 5</item>
|
||||
</grid>
|
||||
|
||||
<grid style="height:5em; grid-template-rows: repeat(auto-fill,1em);">
|
||||
<item>1 1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item>5 5</item>
|
||||
</grid>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>Reference: Masonry layout using `grid-column/row`</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:25px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
|
||||
grid {
|
||||
display: inline-grid;
|
||||
gap: 10px 20px;
|
||||
grid-template-columns: repeat(4,80px);
|
||||
grid-template-rows: masonry;
|
||||
color: #444;
|
||||
border: 1px solid;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
item {
|
||||
background-color: #444;
|
||||
color: #fff;
|
||||
padding: 20px;
|
||||
margin: 3px;
|
||||
border: 5px solid blue;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<grid>
|
||||
<item style="margin-top:10px">3</item>
|
||||
<item style="grid-column:span 2">1</item>
|
||||
<item>2</item>
|
||||
<item style="grid-column:2">5</item>
|
||||
<item style="grid-column:span 2">4</item>
|
||||
<item style="grid-column:1">6</item>
|
||||
</grid>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Test: Masonry layout using `grid-column/row`</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-2">
|
||||
<link rel="match" href="masonry-item-placement-001-ref.html">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:25px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
|
||||
grid {
|
||||
display: inline-grid;
|
||||
gap: 10px 20px;
|
||||
grid-template-columns: repeat(4,80px);
|
||||
grid-template-rows: masonry;
|
||||
color: #444;
|
||||
border: 1px solid;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
item {
|
||||
background-color: #444;
|
||||
color: #fff;
|
||||
padding: 20px;
|
||||
margin: 3px;
|
||||
border: 5px solid blue;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<grid>
|
||||
<item style="grid-column:2/span 2">1</item>
|
||||
<item>2</item>
|
||||
<item style="margin-top:10px">3</item>
|
||||
<item style="grid-column:3/span 2">4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>Reference: Masonry layout using `grid-column/row`</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:25px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
|
||||
grid {
|
||||
display: inline-grid;
|
||||
gap: 10px 20px;
|
||||
grid-template-columns: repeat(4,80px);
|
||||
grid-template-rows: auto;
|
||||
color: #444;
|
||||
border: 1px solid;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
item {
|
||||
background-color: #444;
|
||||
color: #fff;
|
||||
padding: 20px;
|
||||
margin: 3px;
|
||||
border: 5px solid blue;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<grid>
|
||||
<item style="grid-column:1/-1">1</item>
|
||||
<item>3</item>
|
||||
<x></x>
|
||||
<item>2</item>
|
||||
<item>5</item>
|
||||
<item style="grid-column:1/-2">4</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Test: Masonry layout using `grid-column/row`</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-2">
|
||||
<link rel="match" href="masonry-item-placement-002-ref.html">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:25px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
|
||||
grid {
|
||||
display: inline-grid;
|
||||
gap: 10px 20px;
|
||||
grid-auto-columns: 80px;
|
||||
grid-template-rows: masonry;
|
||||
color: #444;
|
||||
border: 1px solid;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
item {
|
||||
background-color: #444;
|
||||
color: #fff;
|
||||
padding: 20px;
|
||||
margin: 3px;
|
||||
border: 5px solid blue;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<grid>
|
||||
<item style="grid-column:foo 2; grid-row:span 2">2</item>
|
||||
<item>3</item>
|
||||
<item style="grid-column:span 3">4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
<item style="grid-column:span 4; grid-row:-100">1</item>
|
||||
</grid>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>Reference: Masonry layout using `grid-column/row` and `dense`</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:25px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
|
||||
grid {
|
||||
display: inline-grid;
|
||||
gap: 10px 20px;
|
||||
grid-auto-columns: 80px;
|
||||
grid-template-rows: masonry;
|
||||
color: #444;
|
||||
border: 1px solid;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
item {
|
||||
background-color: #444;
|
||||
color: #fff;
|
||||
padding: 20px;
|
||||
margin: 3px;
|
||||
border: 5px solid blue;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<grid>
|
||||
<item>1</item>
|
||||
<item>3</item>
|
||||
<item>2</item>
|
||||
<item style="grid-column:span 3">4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Test: Masonry layout using `grid-column/row` and `dense`</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-2">
|
||||
<link rel="match" href="masonry-item-placement-003-ref.html">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:25px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
|
||||
grid {
|
||||
display: inline-grid;
|
||||
gap: 10px 20px;
|
||||
grid-auto-flow: dense;
|
||||
grid-auto-columns: 80px;
|
||||
grid-template-rows: masonry;
|
||||
color: #444;
|
||||
border: 1px solid;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
item {
|
||||
background-color: #444;
|
||||
color: #fff;
|
||||
padding: 20px;
|
||||
margin: 3px;
|
||||
border: 5px solid blue;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<grid>
|
||||
<item style="grid-row:-100">1</item>
|
||||
<item style="grid-column:foo 2; grid-row:span 2">2</item>
|
||||
<item style="grid-column:span 3">4</item>
|
||||
<item>3</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,107 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>Reference: Masonry layout using `grid-column/row`</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
|
||||
grid {
|
||||
display: inline-grid;
|
||||
gap: 1px 2px;
|
||||
grid-template-columns: repeat(4,20px);
|
||||
grid-template-rows: auto;
|
||||
color: #444;
|
||||
border: 1px solid;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
item {
|
||||
background-color: #444;
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<grid>
|
||||
<item style="grid-column:1/2">3</item>
|
||||
<item style="grid-column:2/span 2">1</item>
|
||||
<item style="grid-column:4/5">2</item>
|
||||
<item style="grid-column:2/1">5</item>
|
||||
<item style="grid-column:2/3">6</item>
|
||||
<item style="grid-column:3/span 2">4</item>
|
||||
</grid>
|
||||
|
||||
<grid>
|
||||
<item style="grid-column:1/2">3</item>
|
||||
<item style="grid-column:2/span 2">1</item>
|
||||
<item style="grid-column:4/5">2</item>
|
||||
<item style="grid-column:2/3">5</item>
|
||||
<item style="grid-column:3/span 2">4</item>
|
||||
<item style="grid-column:3/4">6</item>
|
||||
</grid>
|
||||
|
||||
<grid>
|
||||
<item style="grid-column:1/2">3</item>
|
||||
<item style="grid-column:2/span 2">1</item>
|
||||
<item style="grid-column:4/5">2</item>
|
||||
<item style="grid-column:2/1">5</item>
|
||||
<item style="grid-column:2/3">6</item>
|
||||
<item style="grid-column:3/span 2">4</item>
|
||||
</grid>
|
||||
|
||||
<grid>
|
||||
<item style="grid-column:1/2">3</item>
|
||||
<item style="grid-column:2/span 2">1</item>
|
||||
<item style="grid-column:4/5">2</item>
|
||||
<item style="grid-column:2/1">5</item>
|
||||
<item style="grid-column:2/3">6</item>
|
||||
<item style="grid-column:3/span 2">4</item>
|
||||
</grid>
|
||||
|
||||
<div style="direction:rtl">
|
||||
<grid>
|
||||
<item style="grid-column:1/2">3</item>
|
||||
<item style="grid-column:2/span 2">1</item>
|
||||
<item style="grid-column:4/5">2</item>
|
||||
<item style="grid-column:2/1">5</item>
|
||||
<item style="grid-column:2/3">6</item>
|
||||
<item style="grid-column:3/span 2">4</item>
|
||||
</grid>
|
||||
|
||||
<grid>
|
||||
<item style="grid-column:1/2">3</item>
|
||||
<item style="grid-column:2/span 2">1</item>
|
||||
<item style="grid-column:4/5">2</item>
|
||||
<item style="grid-column:2/3">5</item>
|
||||
<item style="grid-column:3/span 2">4</item>
|
||||
<item style="grid-column:3/4">6</item>
|
||||
</grid>
|
||||
|
||||
<grid>
|
||||
<item style="grid-column:1/2">3</item>
|
||||
<item style="grid-column:2/span 2">1</item>
|
||||
<item style="grid-column:4/5">2</item>
|
||||
<item style="grid-column:2/1">5</item>
|
||||
<item style="grid-column:2/3">6</item>
|
||||
<item style="grid-column:3/span 2">4</item>
|
||||
</grid>
|
||||
|
||||
<grid>
|
||||
<item style="grid-column:1/2">3</item>
|
||||
<item style="grid-column:2/span 2">1</item>
|
||||
<item style="grid-column:4/5">2</item>
|
||||
<item style="grid-column:2/1">5</item>
|
||||
<item style="grid-column:2/3">6</item>
|
||||
<item style="grid-column:3/span 2">4</item>
|
||||
</grid>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,109 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Test: Masonry layout using `grid-column/row`</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-2">
|
||||
<link rel="match" href="masonry-item-placement-004-ref.html">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
|
||||
grid {
|
||||
display: inline-grid;
|
||||
gap: 1px 2px;
|
||||
grid-template-columns: repeat(4,20px);
|
||||
grid-template-rows: masonry;
|
||||
color: #444;
|
||||
border: 1px solid;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
item {
|
||||
background-color: #444;
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<grid>
|
||||
<item style="grid-column:2/span 2">1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item style="grid-column:3/span 2">4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="masonry-auto-flow: next">
|
||||
<item style="grid-column:2/span 2">1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item style="grid-column:3/span 2">4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="masonry-auto-flow: ordered">
|
||||
<item style="grid-column:2/span 2">1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item style="grid-column:3/span 2">4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="masonry-auto-flow: next ordered">
|
||||
<item style="grid-column:2/span 2">1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item style="grid-column:3/span 2">4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
||||
<div style="direction:rtl">
|
||||
<grid>
|
||||
<item style="grid-column:2/span 2">1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item style="grid-column:3/span 2">4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="masonry-auto-flow: next">
|
||||
<item style="grid-column:2/span 2">1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item style="grid-column:3/span 2">4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="masonry-auto-flow: ordered">
|
||||
<item style="grid-column:2/span 2">1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item style="grid-column:3/span 2">4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="masonry-auto-flow: next ordered">
|
||||
<item style="grid-column:2/span 2">1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item style="grid-column:3/span 2">4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,107 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>Reference: Masonry layout using `grid-column/row`</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
|
||||
grid {
|
||||
display: inline-grid;
|
||||
gap: 1px 2px;
|
||||
grid-template-columns: repeat(4,20px);
|
||||
grid-template-rows: auto;
|
||||
color: #444;
|
||||
border: 1px solid;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
item {
|
||||
background-color: #444;
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<grid>
|
||||
<item style="grid-column:2/span 2">1</item>
|
||||
<item style="grid-column:4/5">2</item>
|
||||
<item style="grid-column:1/span 2">4</item>
|
||||
<item style="grid-column:3/4">3</item>
|
||||
<item style="grid-column:4/5">5</item>
|
||||
<item style="grid-column:1/2">6</item>
|
||||
</grid>
|
||||
|
||||
<grid>
|
||||
<item style="grid-column:1/2">3</item>
|
||||
<item style="grid-column:2/span 2">1</item>
|
||||
<item style="grid-column:4/5">2</item>
|
||||
<item style="grid-column:1/span 2">4</item>
|
||||
<item style="grid-column:3/4">5</item>
|
||||
<item style="grid-column:4/5">6</item>
|
||||
</grid>
|
||||
|
||||
<grid>
|
||||
<item style="grid-column:1/2">3</item>
|
||||
<item style="grid-column:2/span 2">1</item>
|
||||
<item style="grid-column:4/5">2</item>
|
||||
<item style="grid-column:1/span 2">4</item>
|
||||
<item style="grid-column:3/4">5</item>
|
||||
<item style="grid-column:4/5">6</item>
|
||||
</grid>
|
||||
|
||||
<grid>
|
||||
<item style="grid-column:2/span 2">1</item>
|
||||
<item style="grid-column:4/5">2</item>
|
||||
<item style="grid-column:1/span 2">4</item>
|
||||
<item style="grid-column:3/4">3</item>
|
||||
<item style="grid-column:4/5">5</item>
|
||||
<item style="grid-column:1/2">6</item>
|
||||
</grid>
|
||||
|
||||
<div style="direction:rtl">
|
||||
<grid>
|
||||
<item style="grid-column:2/span 2">1</item>
|
||||
<item style="grid-column:4/5">2</item>
|
||||
<item style="grid-column:1/span 2">4</item>
|
||||
<item style="grid-column:3/4">3</item>
|
||||
<item style="grid-column:4/5">5</item>
|
||||
<item style="grid-column:1/2">6</item>
|
||||
</grid>
|
||||
|
||||
<grid>
|
||||
<item style="grid-column:1/2">3</item>
|
||||
<item style="grid-column:2/span 2">1</item>
|
||||
<item style="grid-column:4/5">2</item>
|
||||
<item style="grid-column:1/span 2">4</item>
|
||||
<item style="grid-column:3/4">5</item>
|
||||
<item style="grid-column:4/5">6</item>
|
||||
</grid>
|
||||
|
||||
<grid>
|
||||
<item style="grid-column:1/2">3</item>
|
||||
<item style="grid-column:2/span 2">1</item>
|
||||
<item style="grid-column:4/5">2</item>
|
||||
<item style="grid-column:1/span 2">4</item>
|
||||
<item style="grid-column:3/4">5</item>
|
||||
<item style="grid-column:4/5">6</item>
|
||||
</grid>
|
||||
|
||||
<grid>
|
||||
<item style="grid-column:2/span 2">1</item>
|
||||
<item style="grid-column:4/5">2</item>
|
||||
<item style="grid-column:1/span 2">4</item>
|
||||
<item style="grid-column:3/4">3</item>
|
||||
<item style="grid-column:4/5">5</item>
|
||||
<item style="grid-column:1/2">6</item>
|
||||
</grid>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,109 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Test: Masonry layout using `grid-column/row`</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-2">
|
||||
<link rel="match" href="masonry-item-placement-005-ref.html">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
|
||||
grid {
|
||||
display: inline-grid;
|
||||
gap: 1px 2px;
|
||||
grid-template-columns: repeat(4,20px);
|
||||
grid-template-rows: masonry;
|
||||
color: #444;
|
||||
border: 1px solid;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
item {
|
||||
background-color: #444;
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<grid>
|
||||
<item style="grid-column:2/span 2">1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item style="grid-column:1/span 2">4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="masonry-auto-flow: ordered">
|
||||
<item style="grid-column:2/span 2">1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item style="grid-column:1/span 2">4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="masonry-auto-flow: ordered next">
|
||||
<item style="grid-column:2/span 2">1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item style="grid-column:1/span 2">4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="masonry-auto-flow: next">
|
||||
<item style="grid-column:2/span 2">1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item style="grid-column:1/span 2">4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
||||
<div style="direction:rtl">
|
||||
<grid>
|
||||
<item style="grid-column:2/span 2">1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item style="grid-column:1/span 2">4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="masonry-auto-flow: ordered">
|
||||
<item style="grid-column:2/span 2">1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item style="grid-column:1/span 2">4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="masonry-auto-flow: ordered next">
|
||||
<item style="grid-column:2/span 2">1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item style="grid-column:1/span 2">4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="masonry-auto-flow: next">
|
||||
<item style="grid-column:2/span 2">1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item style="grid-column:1/span 2">4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,144 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>Reference: Masonry item placement</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
|
||||
grid {
|
||||
display: inline-grid;
|
||||
gap: 1px 2px;
|
||||
grid-template-columns: repeat(4,20px);
|
||||
grid-template-rows: masonry;
|
||||
color: #444;
|
||||
border: 1px solid;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
item {
|
||||
background-color: #444;
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<grid>
|
||||
<item style="padding-top:30px; grid-column:1/2">1</item>
|
||||
<item style="grid-column:2/3">2</item>
|
||||
<item style="grid-column:3/4">3</item>
|
||||
<item style="grid-column:4/5">4</item>
|
||||
<item style="grid-column:2/3">5</item>
|
||||
<item style="grid-column:3/4">6</item>
|
||||
</grid>
|
||||
|
||||
<grid>
|
||||
<item style="grid-column:1/2">1</item>
|
||||
<item style="padding-top:30px; grid-column:2/3">2</item>
|
||||
<item style="grid-column:3/4">3</item>
|
||||
<item style="grid-column:4/5">4</item>
|
||||
<item style="grid-column:1/2">5</item>
|
||||
<item style="grid-column:3/4">6</item>
|
||||
</grid>
|
||||
|
||||
<grid>
|
||||
<item style="padding-top:30px; grid-column:1/2">1</item>
|
||||
<item style="padding-top:30px; grid-column:2/3">2</item>
|
||||
<item style="padding-top:10px; grid-column:3/4">3</item>
|
||||
<item style="grid-column:4/5">4</item>
|
||||
<item style="grid-column:4/5">5</item>
|
||||
<item style="grid-column:3/4">6</item>
|
||||
</grid>
|
||||
|
||||
<grid>
|
||||
<item style="grid-column:1/2">1</item>
|
||||
<item style="padding-top:30px; grid-column:2/3">2</item>
|
||||
<item style="padding-top:10px; grid-column:3/4">3</item>
|
||||
<item style="grid-column:3/span 2">4</item>
|
||||
<item style="grid-column:1/2">5</item>
|
||||
<item style="grid-column:1/2">6</item>
|
||||
</grid>
|
||||
|
||||
<grid>
|
||||
<item style="grid-column:1/2">1</item>
|
||||
<item style="padding-top:30px; grid-column:2/3">2</item>
|
||||
<item style="padding-top:10px; grid-column:3/4">3</item>
|
||||
<item style="grid-column:1/span 3">4</item>
|
||||
<item style="grid-column:4/5">5</item>
|
||||
<item style="grid-column:4/5">6</item>
|
||||
</grid>
|
||||
|
||||
<grid>
|
||||
<item style="grid-column:1/2">1</item>
|
||||
<item style="padding-top:30px; grid-column:2/3">2</item>
|
||||
<item style="padding-top:10px; grid-column:3/4">3</item>
|
||||
<item style="grid-column:1/span 4">4</item>
|
||||
<item style="grid-column:1/2">5</item>
|
||||
<item style="grid-column:2/3">6</item>
|
||||
</grid>
|
||||
|
||||
<span class="next">
|
||||
<grid>
|
||||
<item style="padding-top:30px; grid-column:1/2">1</item>
|
||||
<item style="grid-column:2/3">2</item>
|
||||
<item style="grid-column:3/4">3</item>
|
||||
<item style="grid-column:4/5">4</item>
|
||||
<item style="grid-column:1/2">5</item>
|
||||
<item style="grid-column:2/3">6</item>
|
||||
</grid>
|
||||
|
||||
<grid>
|
||||
<item style="grid-column:1/2">1</item>
|
||||
<item style="padding-top:30px; grid-column:2/3">2</item>
|
||||
<item style="grid-column:3/4">3</item>
|
||||
<item style="grid-column:4/5">4</item>
|
||||
<item style="grid-column:1/2">5</item>
|
||||
<item style="grid-column:2/3">6</item>
|
||||
</grid>
|
||||
|
||||
<grid>
|
||||
<item style="padding-top:30px; grid-column:1/2">1</item>
|
||||
<item style="padding-top:30px; grid-column:2/3">2</item>
|
||||
<item style="padding-top:10px; grid-column:3/4">3</item>
|
||||
<item style="grid-column:4/5">4</item>
|
||||
<item style="grid-column:1/2">5</item>
|
||||
<item style="grid-column:2/3">6</item>
|
||||
</grid>
|
||||
|
||||
<grid>
|
||||
<item style="grid-column:1/2">1</item>
|
||||
<item style="padding-top:30px; grid-column:2/3">2</item>
|
||||
<item style="padding-top:10px; grid-column:3/4">3</item>
|
||||
<item style="grid-column:1/span 2">4</item>
|
||||
<item style="grid-column:3/4">5</item>
|
||||
<item style="grid-column:4/5">6</item>
|
||||
</grid>
|
||||
|
||||
<grid>
|
||||
<item style="grid-column:1/2">1</item>
|
||||
<item style="padding-top:30px; grid-column:2/3">2</item>
|
||||
<item style="padding-top:10px; grid-column:3/4">3</item>
|
||||
<item style="grid-column:1/span 3">4</item>
|
||||
<item style="grid-column:4/5">5</item>
|
||||
<item style="grid-column:1/2">6</item>
|
||||
</grid>
|
||||
|
||||
<grid>
|
||||
<item style="grid-column:1/2">1</item>
|
||||
<item style="padding-top:30px; grid-column:2/3">2</item>
|
||||
<item style="padding-top:10px; grid-column:3/4">3</item>
|
||||
<item style="grid-column:1/span 4">4</item>
|
||||
<item style="grid-column:1/2">5</item>
|
||||
<item style="grid-column:2/3">6</item>
|
||||
</grid>
|
||||
</span>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,149 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Test: Masonry item placement</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-2">
|
||||
<link rel="match" href="masonry-item-placement-006-ref.html">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
|
||||
grid {
|
||||
display: inline-grid;
|
||||
gap: 1px 2px;
|
||||
grid-template-columns: repeat(4,20px);
|
||||
grid-template-rows: masonry;
|
||||
color: #444;
|
||||
border: 1px solid;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
item {
|
||||
background-color: #444;
|
||||
color: #fff;
|
||||
}
|
||||
.next > grid {
|
||||
masonry-auto-flow: next;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<grid>
|
||||
<item style="padding-top:30px">1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
||||
<grid>
|
||||
<item>1</item>
|
||||
<item style="padding-top:30px">2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
||||
<grid>
|
||||
<item style="padding-top:30px">1</item>
|
||||
<item style="padding-top:30px">2</item>
|
||||
<item style="padding-top:10px">3</item>
|
||||
<item>4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
||||
<grid>
|
||||
<item>1</item>
|
||||
<item style="padding-top:30px">2</item>
|
||||
<item style="padding-top:10px">3</item>
|
||||
<item style="grid-column:span 2">4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
||||
<grid>
|
||||
<item>1</item>
|
||||
<item style="padding-top:30px">2</item>
|
||||
<item style="padding-top:10px">3</item>
|
||||
<item style="grid-column:span 3">4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
||||
<grid>
|
||||
<item>1</item>
|
||||
<item style="padding-top:30px">2</item>
|
||||
<item style="padding-top:10px">3</item>
|
||||
<item style="grid-column:span 4">4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
||||
<span class="next">
|
||||
<grid>
|
||||
<item style="padding-top:30px">1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
||||
<grid>
|
||||
<item>1</item>
|
||||
<item style="padding-top:30px">2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
||||
<grid>
|
||||
<item style="padding-top:30px">1</item>
|
||||
<item style="padding-top:30px">2</item>
|
||||
<item style="padding-top:10px">3</item>
|
||||
<item>4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
||||
<grid>
|
||||
<item>1</item>
|
||||
<item style="padding-top:30px">2</item>
|
||||
<item style="padding-top:10px">3</item>
|
||||
<item style="grid-column:span 2">4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
||||
<grid>
|
||||
<item>1</item>
|
||||
<item style="padding-top:30px">2</item>
|
||||
<item style="padding-top:10px">3</item>
|
||||
<item style="grid-column:span 3">4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
||||
<grid>
|
||||
<item>1</item>
|
||||
<item style="padding-top:30px">2</item>
|
||||
<item style="padding-top:10px">3</item>
|
||||
<item style="grid-column:span 4">4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
</span>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,145 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>Reference: Masonry item placement (RTL)</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
|
||||
grid {
|
||||
display: inline-grid;
|
||||
gap: 1px 2px;
|
||||
grid-template-columns: repeat(4,20px);
|
||||
grid-template-rows: masonry;
|
||||
color: #444;
|
||||
border: 1px solid;
|
||||
padding: 2px;
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
item {
|
||||
background-color: #444;
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<grid>
|
||||
<item style="padding-top:30px; grid-column:1/2">1</item>
|
||||
<item style="grid-column:2/3">2</item>
|
||||
<item style="grid-column:3/4">3</item>
|
||||
<item style="grid-column:4/5">4</item>
|
||||
<item style="grid-column:2/3">5</item>
|
||||
<item style="grid-column:3/4">6</item>
|
||||
</grid>
|
||||
|
||||
<grid>
|
||||
<item style="grid-column:1/2">1</item>
|
||||
<item style="padding-top:30px; grid-column:2/3">2</item>
|
||||
<item style="grid-column:3/4">3</item>
|
||||
<item style="grid-column:4/5">4</item>
|
||||
<item style="grid-column:1/2">5</item>
|
||||
<item style="grid-column:3/4">6</item>
|
||||
</grid>
|
||||
|
||||
<grid>
|
||||
<item style="padding-top:30px; grid-column:1/2">1</item>
|
||||
<item style="padding-top:30px; grid-column:2/3">2</item>
|
||||
<item style="padding-top:10px; grid-column:3/4">3</item>
|
||||
<item style="grid-column:4/5">4</item>
|
||||
<item style="grid-column:4/5">5</item>
|
||||
<item style="grid-column:3/4">6</item>
|
||||
</grid>
|
||||
|
||||
<grid>
|
||||
<item style="grid-column:1/2">1</item>
|
||||
<item style="padding-top:30px; grid-column:2/3">2</item>
|
||||
<item style="padding-top:10px; grid-column:3/4">3</item>
|
||||
<item style="grid-column:3/span 2">4</item>
|
||||
<item style="grid-column:1/2">5</item>
|
||||
<item style="grid-column:1/2">6</item>
|
||||
</grid>
|
||||
|
||||
<grid>
|
||||
<item style="grid-column:1/2">1</item>
|
||||
<item style="padding-top:30px; grid-column:2/3">2</item>
|
||||
<item style="padding-top:10px; grid-column:3/4">3</item>
|
||||
<item style="grid-column:1/span 3">4</item>
|
||||
<item style="grid-column:4/5">5</item>
|
||||
<item style="grid-column:4/5">6</item>
|
||||
</grid>
|
||||
|
||||
<grid>
|
||||
<item style="grid-column:1/2">1</item>
|
||||
<item style="padding-top:30px; grid-column:2/3">2</item>
|
||||
<item style="padding-top:10px; grid-column:3/4">3</item>
|
||||
<item style="grid-column:1/span 4">4</item>
|
||||
<item style="grid-column:1/2">5</item>
|
||||
<item style="grid-column:2/3">6</item>
|
||||
</grid>
|
||||
|
||||
<span class="next">
|
||||
<grid>
|
||||
<item style="padding-top:30px; grid-column:1/2">1</item>
|
||||
<item style="grid-column:2/3">2</item>
|
||||
<item style="grid-column:3/4">3</item>
|
||||
<item style="grid-column:4/5">4</item>
|
||||
<item style="grid-column:1/2">5</item>
|
||||
<item style="grid-column:2/3">6</item>
|
||||
</grid>
|
||||
|
||||
<grid>
|
||||
<item style="grid-column:1/2">1</item>
|
||||
<item style="padding-top:30px; grid-column:2/3">2</item>
|
||||
<item style="grid-column:3/4">3</item>
|
||||
<item style="grid-column:4/5">4</item>
|
||||
<item style="grid-column:1/2">5</item>
|
||||
<item style="grid-column:2/3">6</item>
|
||||
</grid>
|
||||
|
||||
<grid>
|
||||
<item style="padding-top:30px; grid-column:1/2">1</item>
|
||||
<item style="padding-top:30px; grid-column:2/3">2</item>
|
||||
<item style="padding-top:10px; grid-column:3/4">3</item>
|
||||
<item style="grid-column:4/5">4</item>
|
||||
<item style="grid-column:1/2">5</item>
|
||||
<item style="grid-column:2/3">6</item>
|
||||
</grid>
|
||||
|
||||
<grid>
|
||||
<item style="grid-column:1/2">1</item>
|
||||
<item style="padding-top:30px; grid-column:2/3">2</item>
|
||||
<item style="padding-top:10px; grid-column:3/4">3</item>
|
||||
<item style="grid-column:1/span 2">4</item>
|
||||
<item style="grid-column:3/4">5</item>
|
||||
<item style="grid-column:4/5">6</item>
|
||||
</grid>
|
||||
|
||||
<grid>
|
||||
<item style="grid-column:1/2">1</item>
|
||||
<item style="padding-top:30px; grid-column:2/3">2</item>
|
||||
<item style="padding-top:10px; grid-column:3/4">3</item>
|
||||
<item style="grid-column:1/span 3">4</item>
|
||||
<item style="grid-column:4/5">5</item>
|
||||
<item style="grid-column:1/2">6</item>
|
||||
</grid>
|
||||
|
||||
<grid>
|
||||
<item style="grid-column:1/2">1</item>
|
||||
<item style="padding-top:30px; grid-column:2/3">2</item>
|
||||
<item style="padding-top:10px; grid-column:3/4">3</item>
|
||||
<item style="grid-column:1/span 4">4</item>
|
||||
<item style="grid-column:1/2">5</item>
|
||||
<item style="grid-column:2/3">6</item>
|
||||
</grid>
|
||||
</span>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,150 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Test: Masonry item placement (RTL)</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-2">
|
||||
<link rel="match" href="masonry-item-placement-007-ref.html">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
|
||||
grid {
|
||||
display: inline-grid;
|
||||
gap: 1px 2px;
|
||||
grid-template-columns: repeat(4,20px);
|
||||
grid-template-rows: masonry;
|
||||
color: #444;
|
||||
border: 1px solid;
|
||||
padding: 2px;
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
item {
|
||||
background-color: #444;
|
||||
color: #fff;
|
||||
}
|
||||
.next > grid {
|
||||
masonry-auto-flow: next;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<grid>
|
||||
<item style="padding-top:30px">1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
||||
<grid>
|
||||
<item>1</item>
|
||||
<item style="padding-top:30px">2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
||||
<grid>
|
||||
<item style="padding-top:30px">1</item>
|
||||
<item style="padding-top:30px">2</item>
|
||||
<item style="padding-top:10px">3</item>
|
||||
<item>4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
||||
<grid>
|
||||
<item>1</item>
|
||||
<item style="padding-top:30px">2</item>
|
||||
<item style="padding-top:10px">3</item>
|
||||
<item style="grid-column:span 2">4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
||||
<grid>
|
||||
<item>1</item>
|
||||
<item style="padding-top:30px">2</item>
|
||||
<item style="padding-top:10px">3</item>
|
||||
<item style="grid-column:span 3">4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
||||
<grid>
|
||||
<item>1</item>
|
||||
<item style="padding-top:30px">2</item>
|
||||
<item style="padding-top:10px">3</item>
|
||||
<item style="grid-column:span 4">4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
||||
<span class="next">
|
||||
<grid>
|
||||
<item style="padding-top:30px">1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
||||
<grid>
|
||||
<item>1</item>
|
||||
<item style="padding-top:30px">2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
||||
<grid>
|
||||
<item style="padding-top:30px">1</item>
|
||||
<item style="padding-top:30px">2</item>
|
||||
<item style="padding-top:10px">3</item>
|
||||
<item>4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
||||
<grid>
|
||||
<item>1</item>
|
||||
<item style="padding-top:30px">2</item>
|
||||
<item style="padding-top:10px">3</item>
|
||||
<item style="grid-column:span 2">4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
||||
<grid>
|
||||
<item>1</item>
|
||||
<item style="padding-top:30px">2</item>
|
||||
<item style="padding-top:10px">3</item>
|
||||
<item style="grid-column:span 3">4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
||||
<grid>
|
||||
<item>1</item>
|
||||
<item style="padding-top:30px">2</item>
|
||||
<item style="padding-top:10px">3</item>
|
||||
<item style="grid-column:span 4">4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
</span>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,125 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>Reference: Masonry layout with `justify-content` in grid axis</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
|
||||
grid {
|
||||
display: inline-grid;
|
||||
gap: 1px 2px;
|
||||
grid-template-columns: repeat(4,20px);
|
||||
grid-template-rows: 1em auto;
|
||||
color: #444;
|
||||
border: 1px solid;
|
||||
padding: 2px;
|
||||
width: 100px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
item {
|
||||
background-color: #444;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.tall { padding-top:30px; grid-row:span 2; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<grid style="justify-content:start">
|
||||
<item style="grid-column:1/2" class="tall">1</item>
|
||||
<item style="grid-column:2/3">2</item>
|
||||
<item style="grid-column:3/4">3</item>
|
||||
<item style="grid-column:4/5">4</item>
|
||||
<item style="grid-column:2/3">5</item>
|
||||
<item style="grid-column:3/4">6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="justify-content:start">
|
||||
<item style="grid-column:1/2">1</item>
|
||||
<item style="grid-column:2/3" class="tall">2</item>
|
||||
<item style="grid-column:3/4">3</item>
|
||||
<item style="grid-column:4/5">4</item>
|
||||
<item style="grid-column:1/2">5</item>
|
||||
<item style="grid-column:3/4">6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="justify-content:end">
|
||||
<item style="grid-column:1/2" class="tall">1</item>
|
||||
<item style="grid-column:2/3">2</item>
|
||||
<item style="grid-column:3/4">3</item>
|
||||
<item style="grid-column:4/5">4</item>
|
||||
<item style="grid-column:2/3">5</item>
|
||||
<item style="grid-column:3/4">6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="justify-content:end">
|
||||
<item style="grid-column:1/2">1</item>
|
||||
<item style="grid-column:2/3" class="tall">2</item>
|
||||
<item style="grid-column:3/4">3</item>
|
||||
<item style="grid-column:4/5">4</item>
|
||||
<item style="grid-column:1/2">5</item>
|
||||
<item style="grid-column:3/4">6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="justify-content:center">
|
||||
<item style="grid-column:1/2" class="tall">1</item>
|
||||
<item style="grid-column:2/3">2</item>
|
||||
<item style="grid-column:3/4">3</item>
|
||||
<item style="grid-column:4/5">4</item>
|
||||
<item style="grid-column:2/3">5</item>
|
||||
<item style="grid-column:3/4">6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="justify-content:center">
|
||||
<item style="grid-column:1/2">1</item>
|
||||
<item style="grid-column:2/3" class="tall">2</item>
|
||||
<item style="grid-column:3/4">3</item>
|
||||
<item style="grid-column:4/5">4</item>
|
||||
<item style="grid-column:1/2">5</item>
|
||||
<item style="grid-column:3/4">6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="justify-content:stretch">
|
||||
<item style="grid-column:1/2" class="tall">1</item>
|
||||
<item style="grid-column:2/3">2</item>
|
||||
<item style="grid-column:3/4">3</item>
|
||||
<item style="grid-column:4/5">4</item>
|
||||
<item style="grid-column:2/3">5</item>
|
||||
<item style="grid-column:3/4">6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="justify-content:space-between">
|
||||
<item style="grid-column:1/2" class="tall">1</item>
|
||||
<item style="grid-column:2/3">2</item>
|
||||
<item style="grid-column:3/4">3</item>
|
||||
<item style="grid-column:4/5">4</item>
|
||||
<item style="grid-column:2/3">5</item>
|
||||
<item style="grid-column:3/4">6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="justify-content:space-around">
|
||||
<item style="grid-column:1/2" class="tall">1</item>
|
||||
<item style="grid-column:2/3">2</item>
|
||||
<item style="grid-column:3/4">3</item>
|
||||
<item style="grid-column:4/5">4</item>
|
||||
<item style="grid-column:2/3">5</item>
|
||||
<item style="grid-column:3/4">6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="justify-content:space-evenly">
|
||||
<item style="grid-column:1/2" class="tall">1</item>
|
||||
<item style="grid-column:2/3">2</item>
|
||||
<item style="grid-column:3/4">3</item>
|
||||
<item style="grid-column:4/5">4</item>
|
||||
<item style="grid-column:2/3">5</item>
|
||||
<item style="grid-column:3/4">6</item>
|
||||
</grid>
|
||||
|
|
@ -0,0 +1,125 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Test: Masonry layout with `justify-content` in grid axis</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-2">
|
||||
<link rel="match" href="masonry-justify-content-001-ref.html">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
|
||||
grid {
|
||||
display: inline-grid;
|
||||
gap: 1px 2px;
|
||||
grid-template-columns: repeat(4,20px);
|
||||
grid-template-rows: masonry;
|
||||
color: #444;
|
||||
border: 1px solid;
|
||||
padding: 2px;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
item {
|
||||
background-color: #444;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<grid style="justify-content:start">
|
||||
<item style="padding-top:30px">1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="justify-content:start">
|
||||
<item>1</item>
|
||||
<item style="padding-top:30px">2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="justify-content:end">
|
||||
<item style="padding-top:30px">1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="justify-content:end">
|
||||
<item>1</item>
|
||||
<item style="padding-top:30px">2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="justify-content:center">
|
||||
<item style="padding-top:30px">1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="justify-content:center">
|
||||
<item>1</item>
|
||||
<item style="padding-top:30px">2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="justify-content:stretch">
|
||||
<item style="padding-top:30px">1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="justify-content:space-between">
|
||||
<item style="padding-top:30px">1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="justify-content:space-around">
|
||||
<item style="padding-top:30px">1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="justify-content:space-evenly">
|
||||
<item style="padding-top:30px">1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
|
@ -0,0 +1,126 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>Reference: Masonry layout with `justify-content` in grid axis</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
|
||||
grid {
|
||||
display: inline-grid;
|
||||
gap: 1px 2px;
|
||||
grid-template-columns: repeat(4,20px);
|
||||
grid-template-rows: 1em auto;
|
||||
color: #444;
|
||||
border: 1px solid;
|
||||
padding: 2px;
|
||||
height: 100px;
|
||||
writing-mode: vertical-lr;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
item {
|
||||
background-color: #444;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.tall { padding-right:30px; grid-row:span 2; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<grid style="justify-content:start">
|
||||
<item style="grid-column:1/2" class="tall">1</item>
|
||||
<item style="grid-column:2/3">2</item>
|
||||
<item style="grid-column:3/4">3</item>
|
||||
<item style="grid-column:4/5">4</item>
|
||||
<item style="grid-column:2/3">5</item>
|
||||
<item style="grid-column:3/4">6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="justify-content:start">
|
||||
<item style="grid-column:1/2">1</item>
|
||||
<item style="grid-column:2/3" class="tall">2</item>
|
||||
<item style="grid-column:3/4">3</item>
|
||||
<item style="grid-column:4/5">4</item>
|
||||
<item style="grid-column:1/2">5</item>
|
||||
<item style="grid-column:3/4">6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="justify-content:end">
|
||||
<item style="grid-column:1/2" class="tall">1</item>
|
||||
<item style="grid-column:2/3">2</item>
|
||||
<item style="grid-column:3/4">3</item>
|
||||
<item style="grid-column:4/5">4</item>
|
||||
<item style="grid-column:2/3">5</item>
|
||||
<item style="grid-column:3/4">6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="justify-content:end">
|
||||
<item style="grid-column:1/2">1</item>
|
||||
<item style="grid-column:2/3" class="tall">2</item>
|
||||
<item style="grid-column:3/4">3</item>
|
||||
<item style="grid-column:4/5">4</item>
|
||||
<item style="grid-column:1/2">5</item>
|
||||
<item style="grid-column:3/4">6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="justify-content:center">
|
||||
<item style="grid-column:1/2" class="tall">1</item>
|
||||
<item style="grid-column:2/3">2</item>
|
||||
<item style="grid-column:3/4">3</item>
|
||||
<item style="grid-column:4/5">4</item>
|
||||
<item style="grid-column:2/3">5</item>
|
||||
<item style="grid-column:3/4">6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="justify-content:center">
|
||||
<item style="grid-column:1/2">1</item>
|
||||
<item style="grid-column:2/3" class="tall">2</item>
|
||||
<item style="grid-column:3/4">3</item>
|
||||
<item style="grid-column:4/5">4</item>
|
||||
<item style="grid-column:1/2">5</item>
|
||||
<item style="grid-column:3/4">6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="justify-content:stretch">
|
||||
<item style="grid-column:1/2" class="tall">1</item>
|
||||
<item style="grid-column:2/3">2</item>
|
||||
<item style="grid-column:3/4">3</item>
|
||||
<item style="grid-column:4/5">4</item>
|
||||
<item style="grid-column:2/3">5</item>
|
||||
<item style="grid-column:3/4">6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="justify-content:space-between">
|
||||
<item style="grid-column:1/2" class="tall">1</item>
|
||||
<item style="grid-column:2/3">2</item>
|
||||
<item style="grid-column:3/4">3</item>
|
||||
<item style="grid-column:4/5">4</item>
|
||||
<item style="grid-column:2/3">5</item>
|
||||
<item style="grid-column:3/4">6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="justify-content:space-around">
|
||||
<item style="grid-column:1/2" class="tall">1</item>
|
||||
<item style="grid-column:2/3">2</item>
|
||||
<item style="grid-column:3/4">3</item>
|
||||
<item style="grid-column:4/5">4</item>
|
||||
<item style="grid-column:2/3">5</item>
|
||||
<item style="grid-column:3/4">6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="justify-content:space-evenly">
|
||||
<item style="grid-column:1/2" class="tall">1</item>
|
||||
<item style="grid-column:2/3">2</item>
|
||||
<item style="grid-column:3/4">3</item>
|
||||
<item style="grid-column:4/5">4</item>
|
||||
<item style="grid-column:2/3">5</item>
|
||||
<item style="grid-column:3/4">6</item>
|
||||
</grid>
|
||||
|
|
@ -0,0 +1,126 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Test: Masonry layout with `justify-content` in grid axis</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-2">
|
||||
<link rel="match" href="masonry-justify-content-002-ref.html">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
|
||||
grid {
|
||||
display: inline-grid;
|
||||
gap: 1px 2px;
|
||||
grid-template-columns: repeat(4,20px);
|
||||
grid-template-rows: masonry;
|
||||
color: #444;
|
||||
border: 1px solid;
|
||||
padding: 2px;
|
||||
height: 100px;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
item {
|
||||
background-color: #444;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<grid style="justify-content:start">
|
||||
<item style="padding-right:30px">1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="justify-content:start">
|
||||
<item>1</item>
|
||||
<item style="padding-right:30px">2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="justify-content:end">
|
||||
<item style="padding-right:30px">1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="justify-content:end">
|
||||
<item>1</item>
|
||||
<item style="padding-right:30px">2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="justify-content:center">
|
||||
<item style="padding-right:30px">1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="justify-content:center">
|
||||
<item>1</item>
|
||||
<item style="padding-right:30px">2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="justify-content:stretch">
|
||||
<item style="padding-right:30px">1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="justify-content:space-between">
|
||||
<item style="padding-right:30px">1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="justify-content:space-around">
|
||||
<item style="padding-right:30px">1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="justify-content:space-evenly">
|
||||
<item style="padding-right:30px">1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
|
@ -0,0 +1,125 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>Reference: Masonry layout with `justify-content` in masonry axis</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
|
||||
grid {
|
||||
display: inline-grid;
|
||||
gap: 1px 2px;
|
||||
grid-template-columns: 1ch auto;
|
||||
grid-template-rows: repeat(4,20px);
|
||||
background: content-box silver;
|
||||
border: 1px solid;
|
||||
padding: 2px;
|
||||
width: 100px;
|
||||
justify-items: start;
|
||||
}
|
||||
|
||||
item {
|
||||
background-color: #444;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.tall { grid-column:span 2; padding-left: 30px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<grid style="justify-content:start">
|
||||
<item class="tall" style="grid-row:1/2">1</item>
|
||||
<item style="grid-row:2/3">2</item>
|
||||
<item style="grid-row:3/4">3</item>
|
||||
<item style="grid-row:4/5">4</item>
|
||||
<item style="grid-row:2/3">5</item>
|
||||
<item style="grid-row:3/4">6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="justify-content:start">
|
||||
<item style="grid-row:1/2">1</item>
|
||||
<item class="tall" style="grid-row:2/3">2</item>
|
||||
<item style="grid-row:3/4">3</item>
|
||||
<item style="grid-row:4/5">4</item>
|
||||
<item style="grid-row:1/2">5</item>
|
||||
<item style="grid-row:3/4">6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="justify-content:end">
|
||||
<item class="tall" style="grid-row:1/2">1</item>
|
||||
<item style="grid-row:2/3">2</item>
|
||||
<item style="grid-row:3/4">3</item>
|
||||
<item style="grid-row:4/5">4</item>
|
||||
<item style="grid-row:2/3">5</item>
|
||||
<item style="grid-row:3/4">6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="justify-content:end">
|
||||
<item style="grid-row:1/2">1</item>
|
||||
<item class="tall" style="grid-row:2/3">2</item>
|
||||
<item style="grid-row:3/4">3</item>
|
||||
<item style="grid-row:4/5">4</item>
|
||||
<item style="grid-row:1/2">5</item>
|
||||
<item style="grid-row:3/4">6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="justify-content:center">
|
||||
<item class="tall" style="grid-row:1/2">1</item>
|
||||
<item style="grid-row:2/3">2</item>
|
||||
<item style="grid-row:3/4">3</item>
|
||||
<item style="grid-row:4/5">4</item>
|
||||
<item style="grid-row:2/3">5</item>
|
||||
<item style="grid-row:3/4">6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="justify-content:center">
|
||||
<item style="grid-row:1/2">1</item>
|
||||
<item class="tall" style="grid-row:2/3">2</item>
|
||||
<item style="grid-row:3/4">3</item>
|
||||
<item style="grid-row:4/5">4</item>
|
||||
<item style="grid-row:1/2">5</item>
|
||||
<item style="grid-row:3/4">6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="justify-content:stretch">
|
||||
<item class="tall" style="grid-row:1/2">1</item>
|
||||
<item style="grid-row:2/3">2</item>
|
||||
<item style="grid-row:3/4">3</item>
|
||||
<item style="grid-row:4/5">4</item>
|
||||
<item style="grid-row:2/3">5</item>
|
||||
<item style="grid-row:3/4">6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="justify-content:start">
|
||||
<item class="tall" style="grid-row:1/2">1</item>
|
||||
<item style="grid-row:2/3">2</item>
|
||||
<item style="grid-row:3/4">3</item>
|
||||
<item style="grid-row:4/5">4</item>
|
||||
<item style="grid-row:2/3">5</item>
|
||||
<item style="grid-row:3/4">6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="justify-content:center">
|
||||
<item class="tall" style="grid-row:1/2">1</item>
|
||||
<item style="grid-row:2/3">2</item>
|
||||
<item style="grid-row:3/4">3</item>
|
||||
<item style="grid-row:4/5">4</item>
|
||||
<item style="grid-row:2/3">5</item>
|
||||
<item style="grid-row:3/4">6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="justify-content:center">
|
||||
<item class="tall" style="grid-row:1/2">1</item>
|
||||
<item style="grid-row:2/3">2</item>
|
||||
<item style="grid-row:3/4">3</item>
|
||||
<item style="grid-row:4/5">4</item>
|
||||
<item style="grid-row:2/3">5</item>
|
||||
<item style="grid-row:3/4">6</item>
|
||||
</grid>
|
||||
|
|
@ -0,0 +1,126 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Test: Masonry layout with `justify-content` in masonry axis</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-2">
|
||||
<link rel="match" href="masonry-justify-content-003-ref.html">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
|
||||
grid {
|
||||
display: inline-grid;
|
||||
gap: 1px 2px;
|
||||
grid-template-columns: masonry;
|
||||
grid-template-rows: repeat(4,20px);
|
||||
background: content-box silver;
|
||||
border: 1px solid;
|
||||
padding: 2px;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
item {
|
||||
background-color: #444;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.tall { padding-left: 30px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<grid style="justify-content:start">
|
||||
<item class="tall">1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="justify-content:start">
|
||||
<item>1</item>
|
||||
<item class="tall">2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="justify-content:end">
|
||||
<item class="tall">1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="justify-content:end">
|
||||
<item>1</item>
|
||||
<item class="tall">2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="justify-content:center">
|
||||
<item class="tall">1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="justify-content:center">
|
||||
<item>1</item>
|
||||
<item class="tall">2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="justify-content:stretch">
|
||||
<item class="tall">1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="justify-content:space-between">
|
||||
<item class="tall">1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="justify-content:space-around">
|
||||
<item class="tall">1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="justify-content:space-evenly">
|
||||
<item class="tall">1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
|
@ -0,0 +1,128 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>Reference: Masonry layout with `justify-content` in masonry axis</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
|
||||
grid {
|
||||
display: inline-grid;
|
||||
gap: 1px 2px;
|
||||
grid-template-columns: 1ch auto;
|
||||
grid-template-rows: repeat(4,20px);
|
||||
background: content-box silver;
|
||||
border: 1px solid;
|
||||
padding: 0 3px 2px 0;
|
||||
width: 100px;
|
||||
height: 120px;
|
||||
align-content: center;
|
||||
justify-items: start;
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
item {
|
||||
background-color: #444;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.tall { grid-column: span 2; padding: 11px 3px 13px 7px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<grid style="justify-content:start">
|
||||
<item class="tall" style="grid-row:1/2">1</item>
|
||||
<item style="grid-row:2/3">2</item>
|
||||
<item style="grid-row:3/4">3</item>
|
||||
<item style="grid-row:4/5">4</item>
|
||||
<item style="grid-row:2/3">5</item>
|
||||
<item style="grid-row:3/4">6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="justify-content:start">
|
||||
<item style="grid-row:1/2">1</item>
|
||||
<item class="tall" style="grid-row:2/3">2</item>
|
||||
<item style="grid-row:3/4">3</item>
|
||||
<item style="grid-row:4/5">4</item>
|
||||
<item style="grid-row:1/2">5</item>
|
||||
<item style="grid-row:3/4">6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="justify-content:end">
|
||||
<item class="tall" style="grid-row:1/2">1</item>
|
||||
<item style="grid-row:2/3">2</item>
|
||||
<item style="grid-row:3/4">3</item>
|
||||
<item style="grid-row:4/5">4</item>
|
||||
<item style="grid-row:2/3">5</item>
|
||||
<item style="grid-row:3/4">6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="justify-content:end">
|
||||
<item style="grid-row:1/2">1</item>
|
||||
<item class="tall" style="grid-row:2/3">2</item>
|
||||
<item style="grid-row:3/4">3</item>
|
||||
<item style="grid-row:4/5">4</item>
|
||||
<item style="grid-row:1/2">5</item>
|
||||
<item style="grid-row:3/4">6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="justify-content:center">
|
||||
<item class="tall" style="grid-row:1/2">1</item>
|
||||
<item style="grid-row:2/3">2</item>
|
||||
<item style="grid-row:3/4">3</item>
|
||||
<item style="grid-row:4/5">4</item>
|
||||
<item style="grid-row:2/3">5</item>
|
||||
<item style="grid-row:3/4">6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="justify-content:center">
|
||||
<item style="grid-row:1/2">1</item>
|
||||
<item class="tall" style="grid-row:2/3">2</item>
|
||||
<item style="grid-row:3/4">3</item>
|
||||
<item style="grid-row:4/5">4</item>
|
||||
<item style="grid-row:1/2">5</item>
|
||||
<item style="grid-row:3/4">6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="justify-content:stretch">
|
||||
<item class="tall" style="grid-row:1/2">1</item>
|
||||
<item style="grid-row:2/3">2</item>
|
||||
<item style="grid-row:3/4">3</item>
|
||||
<item style="grid-row:4/5">4</item>
|
||||
<item style="grid-row:2/3">5</item>
|
||||
<item style="grid-row:3/4">6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="justify-content:start">
|
||||
<item class="tall" style="grid-row:1/2">1</item>
|
||||
<item style="grid-row:2/3">2</item>
|
||||
<item style="grid-row:3/4">3</item>
|
||||
<item style="grid-row:4/5">4</item>
|
||||
<item style="grid-row:2/3">5</item>
|
||||
<item style="grid-row:3/4">6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="justify-content:center">
|
||||
<item class="tall" style="grid-row:1/2">1</item>
|
||||
<item style="grid-row:2/3">2</item>
|
||||
<item style="grid-row:3/4">3</item>
|
||||
<item style="grid-row:4/5">4</item>
|
||||
<item style="grid-row:2/3">5</item>
|
||||
<item style="grid-row:3/4">6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="justify-content:center">
|
||||
<item class="tall" style="grid-row:1/2">1</item>
|
||||
<item style="grid-row:2/3">2</item>
|
||||
<item style="grid-row:3/4">3</item>
|
||||
<item style="grid-row:4/5">4</item>
|
||||
<item style="grid-row:2/3">5</item>
|
||||
<item style="grid-row:3/4">6</item>
|
||||
</grid>
|
||||
|
|
@ -0,0 +1,129 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Test: Masonry layout with `justify-content` in masonry axis</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-2">
|
||||
<link rel="match" href="masonry-justify-content-004-ref.html">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
|
||||
grid {
|
||||
display: inline-grid;
|
||||
gap: 1px 2px;
|
||||
grid-template-columns: masonry;
|
||||
grid-template-rows: repeat(4,20px);
|
||||
background: content-box silver;
|
||||
border: 1px solid;
|
||||
padding: 0 3px 2px 0;
|
||||
width: 100px;
|
||||
height: 120px;
|
||||
align-content: center;
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
item {
|
||||
background-color: #444;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.tall { padding: 11px 3px 13px 7px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<grid style="justify-content:start">
|
||||
<item class="tall">1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="justify-content:start">
|
||||
<item>1</item>
|
||||
<item class="tall">2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="justify-content:end">
|
||||
<item class="tall">1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="justify-content:end">
|
||||
<item>1</item>
|
||||
<item class="tall">2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="justify-content:center">
|
||||
<item class="tall">1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="justify-content:center">
|
||||
<item>1</item>
|
||||
<item class="tall">2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="justify-content:stretch">
|
||||
<item class="tall">1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="justify-content:space-between">
|
||||
<item class="tall">1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="justify-content:space-around">
|
||||
<item class="tall">1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
||||
<grid style="justify-content:space-evenly">
|
||||
<item class="tall">1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>4</item>
|
||||
<item>5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
|
@ -0,0 +1,114 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>Reference: Masonry layout with `justify-tracks` alignment</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
|
||||
.hl { writing-mode: horizontal-tb; direction:ltr; }
|
||||
.hr { writing-mode: horizontal-tb; direction:rtl; }
|
||||
.vll { writing-mode: vertical-lr; direction:ltr; }
|
||||
.vlr { writing-mode: vertical-lr; direction:rtl; }
|
||||
.vrl { writing-mode: vertical-rl; direction:ltr; }
|
||||
.vrr { writing-mode: vertical-rl; direction:rtl; }
|
||||
.swl { writing-mode: sideways-lr; direction:ltr; }
|
||||
.swr { writing-mode: sideways-lr; direction:rtl; }
|
||||
|
||||
grid {
|
||||
display: inline-flex;
|
||||
flex-flow: row wrap;
|
||||
background: content-box silver;
|
||||
color: #444;
|
||||
padding: 1px 2px;
|
||||
inline-size: 30px;
|
||||
vertical-align: top;
|
||||
}
|
||||
grid.vll, grid.vrr, grid.vlr, grid.vrl, grid.swl, grid.swr {
|
||||
block-size: 17px;
|
||||
}
|
||||
grid2 {
|
||||
display: inline-grid;
|
||||
column-gap: 2px;
|
||||
grid-template-columns: 8px 8px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
item {
|
||||
background-color: #444;
|
||||
color: #fff;
|
||||
writing-mode: horizontal-tb;
|
||||
direction: ltr;
|
||||
}
|
||||
|
||||
grid > div {
|
||||
display: inline-flex;
|
||||
flex-flow: row wrap;
|
||||
inline-size: min-content;
|
||||
}
|
||||
|
||||
grid2:nth-child(1) { margin-block-end:1px; }
|
||||
grid2:nth-child(2) { inline-size: 22px; block-size: 12px; }
|
||||
.vll grid2:nth-child(2) { margin-block-start:-4px; grid-template-columns: 12px 8px;}
|
||||
.vrr grid2:nth-child(2) { margin-block-start:-4px; grid-template-columns: 12px 8px;}
|
||||
.vlr grid2:nth-child(2) { margin-block-start:-4px; grid-template-columns: 12px 8px;}
|
||||
.vrl grid2:nth-child(2) { margin-block-start:-4px; grid-template-columns: 12px 8px;}
|
||||
.swl grid2:nth-child(2) { margin-block-start:-4px; grid-template-columns: 12px 8px;}
|
||||
.swr grid2:nth-child(2) { margin-block-start:-4px; grid-template-columns: 12px 8px;}
|
||||
|
||||
.vll grid2:nth-child(1) { inline-size: 22px; }
|
||||
.vrr grid2:nth-child(1) { inline-size: 22px; }
|
||||
.vlr grid2:nth-child(1) { inline-size: 22px; }
|
||||
.vrl grid2:nth-child(1) { inline-size: 22px; }
|
||||
.swl grid2:nth-child(1) { inline-size: 22px; }
|
||||
.swr grid2:nth-child(1) { inline-size: 22px; }
|
||||
|
||||
grid2:nth-child(1) > item:nth-child(1) { background: blue; inline-size:8px; block-size:8px; z-index:1; }
|
||||
grid2:nth-child(2) > item:nth-child(1) { background: magenta; inline-size:8px; block-size:12px; z-index:1; }
|
||||
grid2:nth-child(1) > item:nth-child(2) { background: lime; inline-size:12px; block-size:8px; z-index:2; }
|
||||
grid2:nth-child(2) > item:nth-child(2) { background: purple; inline-size:8px; block-size:8px; z-index:2; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div style="display:none">
|
||||
<grid>
|
||||
<div>
|
||||
<grid2>
|
||||
<item></item>
|
||||
<item></item>
|
||||
</grid2><grid2>
|
||||
<item></item>
|
||||
<item></item>
|
||||
</grid2>
|
||||
</div>
|
||||
</grid>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
let wms = [ "hl", "hr", "vll", "vrr", "vlr", "vrl", "swl", "swr", ];
|
||||
let ats = [ "start", "self-start", "center", "end", "self-end", "stretch", "space-between", "space-around", "space-evenly", ];
|
||||
let acs = [ "start", "center", "end", ];
|
||||
let grid = document.getElementsByTagName('grid')[0];
|
||||
for (const ac of acs) {
|
||||
for (const at of ats) {
|
||||
for (const wm of wms) {
|
||||
let e = grid.cloneNode(true);
|
||||
e.className = wm;
|
||||
e.children[0].children[0].children[0].className = "vrl";
|
||||
e.children[0].children[0].style.justifyContent = at;
|
||||
e.children[0].children[1].style.justifyContent = at;
|
||||
e.style.justifyContent = ac;
|
||||
document.body.appendChild(e);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,81 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Test: Masonry layout with `justify-tracks` alignment</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-2">
|
||||
<link rel="match" href="masonry-justify-tracks-001-ref.html">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
|
||||
.hl { writing-mode: horizontal-tb; direction:ltr; }
|
||||
.hr { writing-mode: horizontal-tb; direction:rtl; }
|
||||
.vll { writing-mode: vertical-lr; direction:ltr; }
|
||||
.vlr { writing-mode: vertical-lr; direction:rtl; }
|
||||
.vrl { writing-mode: vertical-rl; direction:ltr; }
|
||||
.vrr { writing-mode: vertical-rl; direction:rtl; }
|
||||
.swl { writing-mode: sideways-lr; direction:ltr; }
|
||||
.swr { writing-mode: sideways-lr; direction:rtl; }
|
||||
|
||||
grid {
|
||||
display: inline-grid;
|
||||
gap: 1px 2px;
|
||||
grid-template-columns: masonry;
|
||||
grid-template-rows: repeat(2,auto);
|
||||
background: content-box silver;
|
||||
color: #444;
|
||||
padding: 1px 2px;
|
||||
inline-size: 30px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
item {
|
||||
background-color: #444;
|
||||
color: #fff;
|
||||
writing-mode: horizontal-tb;
|
||||
direction: ltr;
|
||||
}
|
||||
|
||||
item:nth-child(1) { background: blue; inline-size:8px; block-size:8px; }
|
||||
item:nth-child(2) { background: magenta; inline-size:8px; block-size:12px; }
|
||||
item:nth-child(3) { background: lime; inline-size:12px; block-size:8px; }
|
||||
item:nth-child(4) { background: purple; inline-size:8px; block-size:8px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div style="display:none">
|
||||
<grid>
|
||||
<item></item>
|
||||
<item></item>
|
||||
<item></item>
|
||||
<item></item>
|
||||
</grid>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
let wms = [ "hl", "hr", "vll", "vrr", "vlr", "vrl", "swl", "swr", ];
|
||||
let ats = [ "start", "self-start", "center", "end", "self-end", "stretch", "space-between", "space-around", "space-evenly", ];
|
||||
let acs = [ "start", "center", "end", ];
|
||||
let grid = document.getElementsByTagName('grid')[0];
|
||||
for (const ac of acs) {
|
||||
for (const at of ats) {
|
||||
for (const wm of wms) {
|
||||
let e = grid.cloneNode(true);
|
||||
e.className = wm;
|
||||
e.children[0].className = "vrl";
|
||||
e.style.justifyTracks = at;
|
||||
e.style.justifyContent = ac;
|
||||
document.body.appendChild(e);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,117 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>Reference: Masonry layout with multiple `justify-tracks` values</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
grid {
|
||||
display: inline-grid;
|
||||
grid-template-columns: auto;
|
||||
grid-template-rows: repeat(8,50px);
|
||||
gap: 3px 5px;
|
||||
padding: 10px 3px 1px 7px;
|
||||
border: solid;
|
||||
border-width: 1px 7px 3px 5px;
|
||||
background: lightgrey content-box;
|
||||
width: 500px;
|
||||
vertical-justify: top;
|
||||
}
|
||||
.fallback { grid-template-rows:3px; padding:0; border:0; display: grid; }
|
||||
item {
|
||||
background: grey;
|
||||
width: 3ch;
|
||||
position: relative;
|
||||
border: 1px solid;
|
||||
}
|
||||
.purple { background:purple; width:auto; border-left:3px solid; }
|
||||
z { display: block; background: yellow; height: calc(.2 * (50px - 2px)); width:calc(.8 * 2ch); }
|
||||
a {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
top: auto;
|
||||
border: 2px solid lime;
|
||||
}
|
||||
masonry-track {
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
gap: 3px 5px;
|
||||
}
|
||||
masonry-track:nth-child(1) { justify-content:start }
|
||||
masonry-track:nth-child(2) { justify-content:end }
|
||||
masonry-track:nth-child(3) { justify-content:center }
|
||||
masonry-track:nth-child(4) { justify-content:stretch; grid-template-columns: repeat(3,auto) repeat(2,max-content); }
|
||||
masonry-track:nth-child(5) { justify-content:space-between }
|
||||
masonry-track:nth-child(6) { justify-content:space-around }
|
||||
masonry-track:nth-child(7) { justify-content:space-evenly }
|
||||
masonry-track:nth-child(8) { justify-content:space-evenly }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<grid>
|
||||
<masonry-track>
|
||||
<item style="width:50px">1</item>
|
||||
<item class="purple">20</item>
|
||||
<item class="purple">26</item>
|
||||
<item>33</item>
|
||||
</masonry-track>
|
||||
<masonry-track>
|
||||
<item class="purple" style="height:25px">2</item>
|
||||
<item>9<a></a></item>
|
||||
<item class="purple">18</item>
|
||||
<item>25</item>
|
||||
</masonry-track>
|
||||
<masonry-track>
|
||||
<item style="margin-left:10px">3</item>
|
||||
<item>15</item>
|
||||
<item class="purple">24</item>
|
||||
<item class="purple">32</item>
|
||||
</masonry-track>
|
||||
<masonry-track>
|
||||
<item class="purple" style="margin-top:5px">4</item>
|
||||
<item class="purple">10</item>
|
||||
<item class="purple" style="writing-mode:vertical-rl">16</item>
|
||||
<item>23</item>
|
||||
<item>31</item>
|
||||
</masonry-track>
|
||||
<masonry-track>
|
||||
<item>5</item>
|
||||
<item>13</item>
|
||||
<item class="purple">22</item>
|
||||
<item>29</item>
|
||||
</masonry-track>
|
||||
<masonry-track>
|
||||
<item class="purple">6<a></a></item>
|
||||
<item>11</item>
|
||||
<item>19</item>
|
||||
<item class="purple">28</item>
|
||||
</masonry-track>
|
||||
<masonry-track>
|
||||
<item>7</item>
|
||||
<item class="purple"><z></z>14<a></a></item>
|
||||
<item>21</item>
|
||||
<item class="purple">30</item>
|
||||
</masonry-track>
|
||||
<masonry-track>
|
||||
<item class="purple" style="writing-mode:vertical-lr">8</item>
|
||||
<item class="purple">12<z></z></item>
|
||||
<item>17</item>
|
||||
<item>27</item>
|
||||
</masonry-track>
|
||||
</grid>
|
||||
<grid class="fallback" style="justify-content:start">
|
||||
<item></item>
|
||||
</grid>
|
||||
<grid class="fallback" style="justify-content:center">
|
||||
<item></item>
|
||||
</grid>
|
||||
<grid class="fallback" style="justify-content:center">
|
||||
<item></item>
|
||||
</grid>
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,91 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Test: Masonry layout with multiple `justify-tracks` values</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-2">
|
||||
<link rel="match" href="masonry-justify-tracks-multi-001-ref.html">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
grid {
|
||||
display: inline-grid;
|
||||
grid-template-columns: masonry;
|
||||
grid-template-rows: repeat(8,50px); /*intentionally one more than justify-tracks values*/
|
||||
gap: 3px 5px;
|
||||
padding: 10px 3px 1px 7px;
|
||||
border: solid;
|
||||
border-width: 1px 7px 3px 5px;
|
||||
background: lightgrey content-box;
|
||||
justify-tracks: start,end,center,stretch,space-between,space-around,space-evenly;
|
||||
width: 500px;
|
||||
vertical-justify: top;
|
||||
}
|
||||
.fallback { grid-template-rows:3px; padding:0; border:0; display: grid; }
|
||||
item {
|
||||
background: grey;
|
||||
width: 3ch;
|
||||
position: relative;
|
||||
border: 1px solid;
|
||||
}
|
||||
item:nth-child(2n) { background:purple; width:auto; border-left:3px solid; }
|
||||
z { display: block; background: yellow; height: 20%; width:80%; }
|
||||
a {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
top: auto;
|
||||
border: 2px solid lime;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<grid>
|
||||
<item style="width:10%">1</item>
|
||||
<item style="height:50%">2</item>
|
||||
<item style="margin-left:2%">3</item>
|
||||
<item style="margin-top:1%">4</item>
|
||||
<item>5</item>
|
||||
<item>6<a></a></item>
|
||||
<item>7</item>
|
||||
<item style="writing-mode:vertical-lr">8</item>
|
||||
<item>9<a></a></item>
|
||||
<item>10</item>
|
||||
<item>11</item>
|
||||
<item>12<z></z></item>
|
||||
<item>13</item>
|
||||
<item><z></z>14<a></a></item>
|
||||
<item>15</item>
|
||||
<item style="writing-mode:vertical-rl">16</item>
|
||||
<item>17</item>
|
||||
<item>18</item>
|
||||
<item>19</item>
|
||||
<item>20</item>
|
||||
<item>21</item>
|
||||
<item>22</item>
|
||||
<item>23</item>
|
||||
<item>24</item>
|
||||
<item>25</item>
|
||||
<item>26</item>
|
||||
<item>27</item>
|
||||
<item>28</item>
|
||||
<item>29</item>
|
||||
<item>30</item>
|
||||
<item>31</item>
|
||||
<item>32</item>
|
||||
<item>33</item>
|
||||
</grid>
|
||||
<grid class="fallback" style="justify-tracks:space-between">
|
||||
<item></item>
|
||||
</grid>
|
||||
<grid class="fallback" style="justify-tracks:space-around">
|
||||
<item></item>
|
||||
</grid>
|
||||
<grid class="fallback" style="justify-tracks:space-evenly">
|
||||
<item></item>
|
||||
</grid>
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,86 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>Reference: Masonry layout with `justify-tracks:stretch`</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:16px/1 Ahem; padding:0; margin:0;
|
||||
}
|
||||
grid {
|
||||
display: inline-grid;
|
||||
grid-template-rows: 150px 100px 50px;
|
||||
grid-template-columns: 500px;
|
||||
gap: 5px 3px;
|
||||
padding: 10px;
|
||||
border: 3px solid;
|
||||
background: lightgrey content-box;
|
||||
width: 500px;
|
||||
}
|
||||
masonry-track {
|
||||
display: grid;
|
||||
gap: 5px 3px;
|
||||
width: 500px;
|
||||
}
|
||||
masonry-track:nth-child(1) {
|
||||
grid-template-rows: 150px;
|
||||
grid-template-columns: max-content auto auto min-content min-content auto;
|
||||
}
|
||||
masonry-track:nth-child(2) {
|
||||
grid-template-rows: 100px;
|
||||
grid-template-columns: auto 50px 3ch 3ch 3ch min-content min-content;
|
||||
}
|
||||
masonry-track:nth-child(3) {
|
||||
grid-template-rows: 50px;
|
||||
grid-template-columns: 3ch auto 3ch 3ch auto 3ch auto;
|
||||
}
|
||||
item {
|
||||
background: grey;
|
||||
width: 3ch;
|
||||
position: relative;
|
||||
}
|
||||
.purple { background:purple; width:auto; }
|
||||
z { display: block; background: yellow; width: 20%; height:10%; }
|
||||
a {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
left: auto;
|
||||
border: 2px solid lime;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<grid>
|
||||
<masonry-track>
|
||||
<item style="border:10px solid; margin:10px 0 5px 3px;">1</item>
|
||||
<item style="writing-mode:vertical-lr" class="purple">8<br>vertical</item>
|
||||
<item class="purple">10</item>
|
||||
<item class="purple" style="width:86px; border:solid; border-width:0 2px; margin-right:1px">12<z></z></item>
|
||||
<item>15</item>
|
||||
<item style="margin:0 auto" class="purple">18</item>
|
||||
</masonry-track>
|
||||
<masonry-track>
|
||||
<item class="purple">2</item>
|
||||
<item style="width:40px; margin-right:10px" class="purple">4</item>
|
||||
<item>5</item>
|
||||
<item>9<a></a></item>
|
||||
<item>13</item>
|
||||
<item style="justify-self:start" class="purple">16</item>
|
||||
<item>19</item>
|
||||
</masonry-track>
|
||||
<masonry-track>
|
||||
<item>3</item>
|
||||
<item class="purple">6<a></a></item>
|
||||
<item>7</item>
|
||||
<item>11</item>
|
||||
<item class="purple">14<z></z><a></a></item>
|
||||
<item>17</item>
|
||||
<item style="margin-left: auto" class="purple">20</item>
|
||||
</masonry-track>
|
||||
</grid>
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Test: Masonry layout with `justify-tracks:stretch`</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-2">
|
||||
<link rel="match" href="masonry-justify-tracks-stretch-001-ref.html">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:16px/1 Ahem; padding:0; margin:0;
|
||||
}
|
||||
grid {
|
||||
display: inline-grid;
|
||||
grid-template-rows: 150px 100px 50px;
|
||||
grid-template-columns: masonry;
|
||||
justify-tracks: stretch;
|
||||
gap: 5px 3px;
|
||||
padding: 10px;
|
||||
border: 3px solid;
|
||||
background: lightgrey content-box;
|
||||
width: 500px;
|
||||
}
|
||||
item {
|
||||
background: grey;
|
||||
width: 3ch;
|
||||
position: relative;
|
||||
}
|
||||
item:nth-child(2n) { background:purple; width:auto; }
|
||||
item:nth-child(1) { border:10px solid; margin: 10px 0 5px 3px; }
|
||||
z { display: block; background: yellow; width: 20%; height:10%; }
|
||||
a {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
left: auto;
|
||||
border: 2px solid lime;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<grid>
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item style="max-width:40px; margin-right:10px">4</item>
|
||||
<item>5</item>
|
||||
<item>6<a></a></item>
|
||||
<item>7</item>
|
||||
<item style="writing-mode:vertical-lr">8 vertical</item>
|
||||
<item>9<a></a></item>
|
||||
<item>10</item>
|
||||
<item>11</item>
|
||||
<item style="max-width:90px; border:solid; border-width:0 2px; box-sizing:border-box; margin-right:1px">12<z></z></item>
|
||||
<item>13</item>
|
||||
<item>14<z></z><a></a></item>
|
||||
<item>15</item>
|
||||
<item style="justify-self:start">16</item>
|
||||
<item>17</item>
|
||||
<item style="margin:0 auto">18</item>
|
||||
<item>19</item>
|
||||
<item style="margin-left: auto">20</item>
|
||||
</grid>
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>Reference: Masonry layout with `justify-tracks:stretch`</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:6px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
grid {
|
||||
display: inline-grid;
|
||||
grid-template-columns: auto auto;
|
||||
grid-template-rows: 30px;
|
||||
gap: 1px 2px;
|
||||
padding: 2px 3px 1px 1px;
|
||||
border-style: solid;
|
||||
border-width: 1px 7px 3px 5px;
|
||||
border-inline-start-color: magenta;
|
||||
border-block-start-color: blue;
|
||||
background: lightgrey content-box;
|
||||
inline-size: 25px;
|
||||
vertical-align: top;
|
||||
}
|
||||
item {
|
||||
border-inline-start: 1px solid magenta;
|
||||
border-block-start: 2px solid blue;
|
||||
}
|
||||
item:nth-child(2n+1) { background: grey; }
|
||||
item:nth-child(2n) { background: cyan; }
|
||||
.hl { writing-mode: horizontal-tb; direction:ltr; }
|
||||
.hr { writing-mode: horizontal-tb; direction:rtl; }
|
||||
.vll { writing-mode: vertical-lr; direction:ltr; }
|
||||
.vlr { writing-mode: vertical-lr; direction:rtl; }
|
||||
.vrl { writing-mode: vertical-rl; direction:ltr; }
|
||||
.vrr { writing-mode: vertical-rl; direction:rtl; }
|
||||
.swl { writing-mode: sideways-lr; direction:ltr; }
|
||||
.swr { writing-mode: sideways-lr; direction:rtl; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div style="display:none">
|
||||
<grid>
|
||||
<item>1</item>
|
||||
<item>2a<br>2b</item>
|
||||
</grid>
|
||||
</div>
|
||||
<script>
|
||||
let wms = [ "hl", "hr", "vll", "vrr", "vlr", "vrl", "swl", "swr", ];
|
||||
let grid = document.getElementsByTagName('grid')[0];
|
||||
for (const reorder of [false, true]) {
|
||||
for (const cb_wm of wms) {
|
||||
for (const child_wm of wms) {
|
||||
let e = grid.cloneNode(true);
|
||||
e.className = cb_wm;
|
||||
e.children[1].className = child_wm;
|
||||
if (reorder) {
|
||||
e.children[0].style.order = '1';
|
||||
}
|
||||
document.body.appendChild(e);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Test: Masonry layout with `justify-tracks:stretch`</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-2">
|
||||
<link rel="match" href="masonry-justify-tracks-stretch-002-ref.html">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:6px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
grid {
|
||||
display: inline-grid;
|
||||
grid-template-columns: masonry;
|
||||
grid-template-rows: 30px;
|
||||
gap: 1px 2px;
|
||||
padding: 2px 3px 1px 1px;
|
||||
border-style: solid;
|
||||
border-width: 1px 7px 3px 5px;
|
||||
border-inline-start-color: magenta;
|
||||
border-block-start-color: blue;
|
||||
background: lightgrey content-box;
|
||||
justify-tracks: stretch;
|
||||
inline-size: 25px;
|
||||
vertical-align: top;
|
||||
}
|
||||
item {
|
||||
position: relative;
|
||||
border-inline-start: 1px solid magenta;
|
||||
border-block-start: 2px solid blue;
|
||||
}
|
||||
item:nth-child(2n+1) { background: grey; }
|
||||
item:nth-child(2n) { background: cyan; }
|
||||
.hl { writing-mode: horizontal-tb; direction:ltr; }
|
||||
.hr { writing-mode: horizontal-tb; direction:rtl; }
|
||||
.vll { writing-mode: vertical-lr; direction:ltr; }
|
||||
.vlr { writing-mode: vertical-lr; direction:rtl; }
|
||||
.vrl { writing-mode: vertical-rl; direction:ltr; }
|
||||
.vrr { writing-mode: vertical-rl; direction:rtl; }
|
||||
.swl { writing-mode: sideways-lr; direction:ltr; }
|
||||
.swr { writing-mode: sideways-lr; direction:rtl; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div style="display:none">
|
||||
<grid>
|
||||
<item>1</item>
|
||||
<item>2a<br>2b</item>
|
||||
</grid>
|
||||
</div>
|
||||
<script>
|
||||
let wms = [ "hl", "hr", "vll", "vrr", "vlr", "vrl", "swl", "swr", ];
|
||||
let grid = document.getElementsByTagName('grid')[0];
|
||||
for (const reorder of [false, true]) {
|
||||
for (const cb_wm of wms) {
|
||||
for (const child_wm of wms) {
|
||||
let e = grid.cloneNode(true);
|
||||
e.className = cb_wm;
|
||||
e.children[1].className = child_wm;
|
||||
if (reorder) {
|
||||
e.children[0].style.order = '1';
|
||||
}
|
||||
document.body.appendChild(e);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>Reference: Masonry layout using `order`</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:25px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
|
||||
grid {
|
||||
display: inline-grid;
|
||||
gap: 10px 20px;
|
||||
grid-template-columns: repeat(4,auto);
|
||||
grid-template-rows: masonry;
|
||||
color: #444;
|
||||
border: 1px solid;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
item {
|
||||
background-color: #444;
|
||||
color: #fff;
|
||||
padding: 20px;
|
||||
margin: 3px;
|
||||
border: 5px solid blue;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<grid>
|
||||
<item>1</item>
|
||||
<item style="margin-top:10px">4</item>
|
||||
<item>6</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item style="grid-column:3/span 2">5</item>
|
||||
</grid>
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Test: Masonry layout using `order`</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-2">
|
||||
<link rel="match" href="masonry-order-001-ref.html">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:25px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
|
||||
grid {
|
||||
display: inline-grid;
|
||||
gap: 10px 20px;
|
||||
grid-template-columns: repeat(4,auto);
|
||||
grid-template-rows: masonry;
|
||||
color: #444;
|
||||
border: 1px solid;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
item {
|
||||
background-color: #444;
|
||||
color: #fff;
|
||||
padding: 20px;
|
||||
margin: 3px;
|
||||
border: 5px solid blue;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<grid>
|
||||
<item>1</item>
|
||||
<item style="order:1">2</item>
|
||||
<item style="order:2">3</item>
|
||||
<item style="margin-top:10px">4</item>
|
||||
<item style="order:1; grid-column:span 2">5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>Reference: Masonry layout using `order` and `masonry-auto-flow: next`</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:25px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
|
||||
grid {
|
||||
display: inline-grid;
|
||||
gap: 10px 20px;
|
||||
grid-template-columns: repeat(4,auto);
|
||||
grid-template-rows: masonry;
|
||||
color: #444;
|
||||
border: 1px solid;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
item {
|
||||
background-color: #444;
|
||||
color: #fff;
|
||||
padding: 20px;
|
||||
margin: 3px;
|
||||
border: 5px solid blue;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<grid>
|
||||
<item>1</item>
|
||||
<item style="margin-top:10px">4</item>
|
||||
<item>6</item>
|
||||
<item>2</item>
|
||||
<item style="grid-column:1/span 2">5</item>
|
||||
<item style="grid-column:3">3</item>
|
||||
</grid>
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Test: Masonry layout using `order` and `masonry-auto-flow: next`</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-2">
|
||||
<link rel="match" href="masonry-order-002-ref.html">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:25px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
|
||||
grid {
|
||||
display: inline-grid;
|
||||
gap: 10px 20px;
|
||||
grid-template-columns: repeat(4,auto);
|
||||
grid-template-rows: masonry;
|
||||
masonry-auto-flow: next;
|
||||
color: #444;
|
||||
border: 1px solid;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
item {
|
||||
background-color: #444;
|
||||
color: #fff;
|
||||
padding: 20px;
|
||||
margin: 3px;
|
||||
border: 5px solid blue;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<grid>
|
||||
<item>1</item>
|
||||
<item style="order:1">2</item>
|
||||
<item style="order:2">3</item>
|
||||
<item style="margin-top:10px">4</item>
|
||||
<item style="order:1; grid-column:span 2">5</item>
|
||||
<item>6</item>
|
||||
</grid>
|
||||
|
|
@ -0,0 +1,89 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Masonry Test: parsing properties and shortands</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-2/#propdef-grid-template-columns">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/support/parsing-testcommon.js"></script>
|
||||
<script src="/css/support/shorthand-testcommon.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
function masonry_test_template_prop(name) {
|
||||
test_valid_value(name, 'masonry');
|
||||
test_invalid_value(name, 'masonry []');
|
||||
test_invalid_value(name, 'masonry [foo] 40px');
|
||||
test_invalid_value(name, 'masonry 40px');
|
||||
test_invalid_value(name, '[foo] masonry');
|
||||
test_invalid_value(name, '0px masonry');
|
||||
test_invalid_value(name, 'masonry masonry');
|
||||
test_invalid_value(name, 'subgrid masonry');
|
||||
test_invalid_value(name, 'masonry subgrid');
|
||||
test_invalid_value(name, 'masonry repeat(1, [])');
|
||||
test_invalid_value(name, 'masonry repeat(auto-fill, [])');
|
||||
test_invalid_value(name, 'masonry / none');
|
||||
}
|
||||
masonry_test_template_prop("grid-template-columns");
|
||||
masonry_test_template_prop("grid-template-rows");
|
||||
|
||||
test_shorthand_value("grid-template", 'masonry / masonry', {
|
||||
'grid-template-rows': 'masonry',
|
||||
'grid-template-columns': 'masonry',
|
||||
'grid-template-areas': 'none'
|
||||
});
|
||||
|
||||
test_shorthand_value("grid-template", 'masonry / subgrid [foo]', {
|
||||
'grid-template-rows': 'masonry',
|
||||
'grid-template-columns': 'subgrid [foo]',
|
||||
'grid-template-areas': 'none'
|
||||
});
|
||||
|
||||
test_shorthand_value("grid-template", '10px / masonry', {
|
||||
'grid-template-rows': '10px',
|
||||
'grid-template-columns': 'masonry',
|
||||
'grid-template-areas': 'none'
|
||||
});
|
||||
|
||||
test_shorthand_value("grid", 'masonry / masonry', {
|
||||
'grid-template-rows': 'masonry',
|
||||
'grid-template-columns': 'masonry',
|
||||
'grid-template-areas': 'none',
|
||||
'grid-auto-rows': 'auto',
|
||||
'grid-auto-columns': 'auto',
|
||||
'grid-auto-flow': 'row'
|
||||
});
|
||||
|
||||
test_shorthand_value("grid", 'masonry / subgrid [foo]', {
|
||||
'grid-template-rows': 'masonry',
|
||||
'grid-template-columns': 'subgrid [foo]',
|
||||
'grid-template-areas': 'none',
|
||||
'grid-auto-rows': 'auto',
|
||||
'grid-auto-columns': 'auto',
|
||||
'grid-auto-flow': 'row'
|
||||
});
|
||||
|
||||
test_shorthand_value("grid", '10px / masonry', {
|
||||
'grid-template-rows': '10px',
|
||||
'grid-template-columns': 'masonry',
|
||||
'grid-template-areas': 'none',
|
||||
'grid-auto-rows': 'auto',
|
||||
'grid-auto-columns': 'auto',
|
||||
'grid-auto-flow': 'row'
|
||||
});
|
||||
|
||||
test_valid_value("masonry-auto-flow", 'pack');
|
||||
test_valid_value("masonry-auto-flow", 'pack ordered', 'ordered');
|
||||
test_valid_value("masonry-auto-flow", 'ordered next', 'next ordered');
|
||||
test_valid_value("masonry-auto-flow", 'next definite-first', 'next');
|
||||
test_valid_value("masonry-auto-flow", 'definite-first pack', 'pack');
|
||||
test_invalid_value("masonry-auto-flow", 'auto');
|
||||
test_invalid_value("masonry-auto-flow", 'none');
|
||||
test_invalid_value("masonry-auto-flow", '10px');
|
||||
test_invalid_value("masonry-auto-flow", 'row');
|
||||
test_invalid_value("masonry-auto-flow", 'dense');
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,224 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>Reference: Masonry layout with a subgrid</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
|
||||
grid {
|
||||
display: inline-grid;
|
||||
grid-template-rows: 50px 80px 40px;
|
||||
grid-template-columns: auto;
|
||||
gap: 4px 2px;
|
||||
padding: 1px 3px 5px 7px;
|
||||
border: solid;
|
||||
border-width: 3px 5px 1px 1px;
|
||||
background: lightgrey content-box;
|
||||
}
|
||||
masonry-track {
|
||||
display: grid;
|
||||
gap: 4px 2px;
|
||||
}
|
||||
masonry-track:nth-child(1) {
|
||||
grid-template-rows: 50px;
|
||||
grid-template-columns: min-content auto;
|
||||
}
|
||||
masonry-track:nth-child(2) {
|
||||
grid-auto-flow: column;
|
||||
grid-template-rows: 80px 40px;
|
||||
grid-template-columns: auto;
|
||||
}
|
||||
.rows {
|
||||
grid-template-columns: 50px 122px;
|
||||
grid-template-rows: auto;
|
||||
align-content: start;
|
||||
}
|
||||
.rows > masonry-track:nth-child(1) {
|
||||
grid-template-columns: 50px;
|
||||
grid-template-rows: auto;
|
||||
align-content: start;
|
||||
}
|
||||
.rows > masonry-track:nth-child(2) {
|
||||
grid-template-columns: 80px 40px;
|
||||
grid-template-rows: auto;
|
||||
align-content: start;
|
||||
}
|
||||
item {
|
||||
background: grey;
|
||||
width: 3ch;
|
||||
position: relative;
|
||||
}
|
||||
.purple { background:purple; width:auto; justify-self:start; }
|
||||
.rows .purple { justify-self:stretch; }
|
||||
.nth-1 {
|
||||
border: solid;
|
||||
border-width: 3px 13px 1px 1px;
|
||||
margin: 7px 1px 5px 3px;
|
||||
}
|
||||
subgrid {
|
||||
display: grid;
|
||||
grid: subgrid / 2ch auto;
|
||||
grid-row: 2 / span 2;
|
||||
grid-gap: 8px 20px;
|
||||
background: yellow;
|
||||
}
|
||||
masonry-track > subgrid {
|
||||
grid-row: 1 / span 2;
|
||||
}
|
||||
.rows > masonry-track > subgrid {
|
||||
grid: auto auto / subgrid;
|
||||
grid-row: 2;
|
||||
grid-column: 1 / span 2;
|
||||
}
|
||||
.js { justify-self:stretch; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- just to sanity check that `masonry` behaves as `none` in the column axis in this case: -->
|
||||
<grid style="grid:masonry/none">
|
||||
<item class="nth-1">1</item>
|
||||
<item class="purple js">2</item>
|
||||
<item>3</item>
|
||||
<subgrid style="grid:masonry/none">
|
||||
<item class="nth-1">4a</item>
|
||||
<item style="margin-right:15px" class="purple js">4b</item>
|
||||
</subgrid>
|
||||
</grid>
|
||||
|
||||
<grid>
|
||||
<masonry-track>
|
||||
<item class="nth-1">1</item>
|
||||
<item>5</item>
|
||||
</masonry-track>
|
||||
<masonry-track>
|
||||
<item class="purple">2</item>
|
||||
<item>3</item>
|
||||
<subgrid>
|
||||
<item class="nth-1" style="grid-column:span 2">4a</item>
|
||||
<item class="purple js">4b</item>
|
||||
<item>4c</item>
|
||||
</subgrid>
|
||||
</masonry-track>
|
||||
</grid>
|
||||
|
||||
<grid>
|
||||
<masonry-track>
|
||||
<item class="nth-1">1</item>
|
||||
<item>5</item>
|
||||
</masonry-track>
|
||||
<masonry-track>
|
||||
<item class="purple">2</item>
|
||||
<item>3</item>
|
||||
<subgrid style="grid:subgrid/auto">
|
||||
<item class="nth-1">4a</item>
|
||||
<item class="purple js">4b</item>
|
||||
<item>4c</item>
|
||||
</subgrid>
|
||||
</masonry-track>
|
||||
</grid>
|
||||
|
||||
<grid>
|
||||
<masonry-track>
|
||||
<item class="nth-1">1</item>
|
||||
<item>5</item>
|
||||
</masonry-track>
|
||||
<masonry-track>
|
||||
<item class="purple">2</item>
|
||||
<item>3</item>
|
||||
<subgrid style="grid:subgrid/auto; grid-auto-flow:column">
|
||||
<item class="nth-1">4a</item>
|
||||
<item class="purple js">4b</item>
|
||||
<item>4c</item>
|
||||
</subgrid>
|
||||
</masonry-track>
|
||||
</grid>
|
||||
|
||||
<grid>
|
||||
<masonry-track>
|
||||
<item class="nth-1">1</item>
|
||||
<item>5</item>
|
||||
</masonry-track>
|
||||
<masonry-track>
|
||||
<item class="purple">2</item>
|
||||
<item>3</item>
|
||||
<subgrid style="grid:auto auto/masonry">
|
||||
<item class="nth-1">4a</item>
|
||||
<item class="purple">4b</item>
|
||||
<item>4c</item>
|
||||
</subgrid>
|
||||
</masonry-track>
|
||||
</grid>
|
||||
|
||||
<grid class="rows">
|
||||
<masonry-track>
|
||||
<item class="nth-1">1</item>
|
||||
<item>5</item>
|
||||
</masonry-track>
|
||||
<masonry-track>
|
||||
<item class="purple">2</item>
|
||||
<item>3</item>
|
||||
<subgrid>
|
||||
<item class="nth-1" style="grid-row:span 2; align-self:start">4a</item>
|
||||
<item class="purple">4b</item>
|
||||
<item style="grid-column:2">4c</item>
|
||||
</subgrid>
|
||||
</masonry-track>
|
||||
</grid>
|
||||
|
||||
<grid class="rows">
|
||||
<masonry-track>
|
||||
<item class="nth-1">1</item>
|
||||
<item>5</item>
|
||||
</masonry-track>
|
||||
<masonry-track>
|
||||
<item class="purple">2</item>
|
||||
<item>3</item>
|
||||
<subgrid style="grid:auto/subgrid">
|
||||
<item class="nth-1">4a</item>
|
||||
<item class="purple">4b</item>
|
||||
<item>4c</item>
|
||||
</subgrid>
|
||||
</masonry-track>
|
||||
</grid>
|
||||
|
||||
<grid class="rows">
|
||||
<masonry-track>
|
||||
<item class="nth-1">1</item>
|
||||
<item>5</item>
|
||||
</masonry-track>
|
||||
<masonry-track>
|
||||
<item class="purple">2</item>
|
||||
<item>3</item>
|
||||
<subgrid style="grid:auto/subgrid; grid-auto-flow:column">
|
||||
<item class="nth-1">4a</item>
|
||||
<item class="purple">4b</item>
|
||||
<item>4c</item>
|
||||
</subgrid>
|
||||
</masonry-track>
|
||||
</grid>
|
||||
|
||||
<grid class="rows">
|
||||
<masonry-track>
|
||||
<item class="nth-1">1</item>
|
||||
<item>5</item>
|
||||
</masonry-track>
|
||||
<masonry-track>
|
||||
<item class="purple">2</item>
|
||||
<item>3</item>
|
||||
<subgrid style="grid:auto auto/subgrid">
|
||||
<item class="nth-1">4a</item>
|
||||
<item class="purple">4b</item>
|
||||
<item>4c</item>
|
||||
</subgrid>
|
||||
</masonry-track>
|
||||
</grid>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,164 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Test: Masonry layout with a subgrid</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-2">
|
||||
<link rel="match" href="masonry-subgrid-001-ref.html">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
|
||||
grid {
|
||||
display: inline-grid;
|
||||
grid-template-rows: 50px 80px 40px;
|
||||
grid-template-columns: masonry;
|
||||
gap: 4px 2px;
|
||||
padding: 1px 3px 5px 7px;
|
||||
border: solid;
|
||||
border-width: 3px 5px 1px 1px;
|
||||
background: lightgrey content-box;
|
||||
}
|
||||
.rows {
|
||||
grid-template-columns: 50px 80px 40px;
|
||||
grid-template-rows: masonry;
|
||||
}
|
||||
item {
|
||||
background: grey;
|
||||
width: 3ch;
|
||||
position: relative;
|
||||
}
|
||||
item:nth-child(2n) { background:purple; width:auto; }
|
||||
item:nth-child(1) {
|
||||
border: solid;
|
||||
border-width: 3px 13px 1px 1px;
|
||||
margin: 7px 1px 5px 3px;
|
||||
}
|
||||
subgrid {
|
||||
display: grid;
|
||||
grid: subgrid / subgrid;
|
||||
grid-row: 2 / span 2;
|
||||
grid-gap: 8px 20px;
|
||||
background: yellow;
|
||||
}
|
||||
.rows > subgrid {
|
||||
grid-row: initial;
|
||||
grid-column: 2 / span 2;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- just to sanity check that `masonry` behaves as `none` in the column axis in this case: -->
|
||||
<grid style="grid:masonry/masonry">
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<subgrid>
|
||||
<item>4a</item>
|
||||
<item style="margin-right:15px">4b</item>
|
||||
</subgrid>
|
||||
</grid>
|
||||
|
||||
<grid>
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<subgrid>
|
||||
<item>4a</item>
|
||||
<item>4b</item>
|
||||
<item>4c</item>
|
||||
</subgrid>
|
||||
<item>5</item>
|
||||
</grid>
|
||||
|
||||
<grid>
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<subgrid style="grid:subgrid/auto">
|
||||
<item>4a</item>
|
||||
<item>4b</item>
|
||||
<item>4c</item>
|
||||
</subgrid>
|
||||
<item>5</item>
|
||||
</grid>
|
||||
|
||||
<grid>
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<subgrid style="grid:subgrid/auto; grid-auto-flow:column">
|
||||
<item>4a</item>
|
||||
<item>4b</item>
|
||||
<item>4c</item>
|
||||
</subgrid>
|
||||
<item>5</item>
|
||||
</grid>
|
||||
|
||||
<grid>
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<subgrid style="grid:auto auto/subgrid">
|
||||
<item>4a</item>
|
||||
<item>4b</item>
|
||||
<item>4c</item>
|
||||
</subgrid>
|
||||
<item>5</item>
|
||||
</grid>
|
||||
|
||||
<grid class="rows">
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<subgrid>
|
||||
<item>4a</item>
|
||||
<item>4b</item>
|
||||
<item>4c</item>
|
||||
</subgrid>
|
||||
<item>5</item>
|
||||
</grid>
|
||||
|
||||
<grid class="rows">
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<subgrid style="grid:auto/subgrid">
|
||||
<item>4a</item>
|
||||
<item>4b</item>
|
||||
<item>4c</item>
|
||||
</subgrid>
|
||||
<item>5</item>
|
||||
</grid>
|
||||
|
||||
<grid class="rows">
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<subgrid style="grid:auto/subgrid; grid-auto-flow:column">
|
||||
<item>4a</item>
|
||||
<item>4b</item>
|
||||
<item>4c</item>
|
||||
</subgrid>
|
||||
<item>5</item>
|
||||
</grid>
|
||||
|
||||
<grid class="rows">
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<subgrid style="grid:auto auto/subgrid">
|
||||
<item>4a</item>
|
||||
<item>4b</item>
|
||||
<item>4c</item>
|
||||
</subgrid>
|
||||
<item>5</item>
|
||||
</grid>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,302 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>Reference: Masonry layout with a subgrid</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
|
||||
grid {
|
||||
display: inline-grid;
|
||||
grid-template-rows: 40px 30px 20px;
|
||||
grid-template-columns: masonry;
|
||||
gap: 4px 2px;
|
||||
padding: 1px 3px 5px 7px;
|
||||
border: solid;
|
||||
border-width: 3px 5px 1px 1px;
|
||||
background: lightgrey content-box;
|
||||
grid-auto-flow: column;
|
||||
}
|
||||
.rows {
|
||||
grid-template-columns: 40px 30px 20px;
|
||||
grid-template-rows: masonry;
|
||||
grid-auto-flow: row;
|
||||
}
|
||||
item {
|
||||
background: grey;
|
||||
width: 3ch;
|
||||
position: relative;
|
||||
}
|
||||
item:nth-child(2n) { background:purple; width:auto; }
|
||||
item:nth-child(1) {
|
||||
border: solid;
|
||||
border-width: 3px 5px 1px 1px;
|
||||
margin: 7px 1px 5px 3px;
|
||||
}
|
||||
subgrid {
|
||||
display: grid;
|
||||
grid-row: auto/span 2;
|
||||
grid-column: auto/span 2;
|
||||
grid: subgrid / subgrid;
|
||||
grid-gap: 6px 8px;
|
||||
background: yellow;
|
||||
}
|
||||
subgrid.definite {
|
||||
grid-row-start:2;
|
||||
}
|
||||
subgrid.extent {
|
||||
grid-row: 1/span 3;
|
||||
}
|
||||
.rows > subgrid.definite {
|
||||
grid-column-start:2;
|
||||
grid-row-start:auto;
|
||||
}
|
||||
.rows > subgrid.extent {
|
||||
grid-row: auto/span 2;
|
||||
grid-column: 1/span 3;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- auto-placed subgrid inhibits subgridding when parent is doing masonry layout ... -->
|
||||
<grid>
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<subgrid style="grid: none / masonry">
|
||||
<item>4a</item>
|
||||
<item>4b</item>
|
||||
<item>4c</item>
|
||||
</subgrid>
|
||||
<item>5</item>
|
||||
</grid>
|
||||
|
||||
<!-- ... unless it's auto-placed in the first track ... -->
|
||||
<grid>
|
||||
<item>1</item>
|
||||
<subgrid class="definite">
|
||||
<item>4a</item>
|
||||
<item>4b</item>
|
||||
<item>4c</item>
|
||||
</subgrid>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>5</item>
|
||||
</grid>
|
||||
|
||||
<!-- ... or has definite start position -->
|
||||
<grid>
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<subgrid style="grid: 29px 19px / masonry">
|
||||
<item>4a</item>
|
||||
<item>4b</item>
|
||||
<item>4c</item>
|
||||
</subgrid>
|
||||
<item>5</item>
|
||||
</grid>
|
||||
|
||||
<!-- ... or span all tracks in the grid-axis -->
|
||||
<grid>
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<subgrid class="extent" style="grid: 39px 28px 19px / masonry">
|
||||
<item>4a</item>
|
||||
<item>4b</item>
|
||||
<item>4c</item>
|
||||
</subgrid>
|
||||
<item>5</item>
|
||||
</grid>
|
||||
|
||||
<!-- auto-placed subgrid inhibits subgridding when parent is doing masonry layout ... -->
|
||||
<grid>
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<subgrid style="grid: none / masonry">
|
||||
<item>4a</item>
|
||||
<item>4b</item>
|
||||
<item>4c</item>
|
||||
</subgrid>
|
||||
<item>5</item>
|
||||
</grid>
|
||||
|
||||
<!-- ... unless it's auto-placed in the first track ... -->
|
||||
<grid>
|
||||
<item>1</item>
|
||||
<subgrid class="definite">
|
||||
<item>4a</item>
|
||||
<item>4b</item>
|
||||
<item>4c</item>
|
||||
</subgrid>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>5</item>
|
||||
</grid>
|
||||
|
||||
<!-- ... or has definite start position -->
|
||||
<grid>
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<subgrid style="grid: 29px 19px / masonry">
|
||||
<item>4a</item>
|
||||
<item>4b</item>
|
||||
<item>4c</item>
|
||||
</subgrid>
|
||||
<item>5</item>
|
||||
</grid>
|
||||
|
||||
<!-- ... or span all tracks in the grid-axis -->
|
||||
<grid>
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<subgrid class="extent" style="grid: 39px 28px 19px / masonry">
|
||||
<item>4a</item>
|
||||
<item>4b</item>
|
||||
<item>4c</item>
|
||||
</subgrid>
|
||||
<item>5</item>
|
||||
</grid>
|
||||
|
||||
<!-- auto-placed subgrid "inherits" masonry if it has a grid-axis of its own -->
|
||||
<grid>
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<subgrid style="grid: auto auto / masonry">
|
||||
<item>4a</item>
|
||||
<item>4b</item>
|
||||
<item>4c</item>
|
||||
</subgrid>
|
||||
<item>5</item>
|
||||
</grid>
|
||||
|
||||
<!-- auto-placed subgrid inhibits subgridding when parent is doing masonry layout ... -->
|
||||
<grid class="rows">
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<subgrid style="grid: masonry / none">
|
||||
<item>4a</item>
|
||||
<item>4b</item>
|
||||
<item>4c</item>
|
||||
</subgrid>
|
||||
<item>5</item>
|
||||
</grid>
|
||||
|
||||
<!-- ... unless it's auto-placed in the first track ... -->
|
||||
<grid class="rows">
|
||||
<item>1</item>
|
||||
<subgrid class="definite">
|
||||
<item>4a</item>
|
||||
<item>4b</item>
|
||||
<item>4c</item>
|
||||
</subgrid>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>5</item>
|
||||
</grid>
|
||||
|
||||
<!-- ... or has definite start position -->
|
||||
<grid class="rows">
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<subgrid style="grid: masonry / 27px 17px">
|
||||
<item>4a</item>
|
||||
<item>4b</item>
|
||||
<item>4c</item>
|
||||
</subgrid>
|
||||
<item>5</item>
|
||||
</grid>
|
||||
|
||||
<!-- ... or span all tracks in the grid-axis -->
|
||||
<grid class="rows">
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<subgrid class="extent" style="grid: masonry / 37px 24px 17px">
|
||||
<item>4a</item>
|
||||
<item>4b</item>
|
||||
<item>4c</item>
|
||||
</subgrid>
|
||||
<item>5</item>
|
||||
</grid>
|
||||
|
||||
<!-- auto-placed subgrid inhibits subgridding when parent is doing masonry layout -->
|
||||
<grid class="rows">
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<subgrid style="grid: masonry / none">
|
||||
<item>4a</item>
|
||||
<item>4b</item>
|
||||
<item>4c</item>
|
||||
</subgrid>
|
||||
<item>5</item>
|
||||
</grid>
|
||||
|
||||
<!-- ... unless it's auto-placed in the first track ... -->
|
||||
<grid class="rows">
|
||||
<item>1</item>
|
||||
<subgrid class="definite">
|
||||
<item>4a</item>
|
||||
<item>4b</item>
|
||||
<item>4c</item>
|
||||
</subgrid>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>5</item>
|
||||
</grid>
|
||||
|
||||
<!-- ... or has definite start position -->
|
||||
<grid class="rows">
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<subgrid style="grid: masonry / 27px 17px">
|
||||
<item>4a</item>
|
||||
<item>4b</item>
|
||||
<item>4c</item>
|
||||
</subgrid>
|
||||
<item>5</item>
|
||||
</grid>
|
||||
|
||||
<!-- ... or span all tracks in the grid-axis -->
|
||||
<grid class="rows">
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<subgrid class="extent" style="grid: masonry / 37px 24px 17px">
|
||||
<item>4a</item>
|
||||
<item>4b</item>
|
||||
<item>4c</item>
|
||||
</subgrid>
|
||||
<item>5</item>
|
||||
</grid>
|
||||
|
||||
<!-- auto-placed subgrid "inherits" masonry if it has a grid-axis of its own -->
|
||||
<grid class="rows">
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<subgrid style="grid: masonry / auto auto">
|
||||
<item>4a</item>
|
||||
<item>4b</item>
|
||||
<item>4c</item>
|
||||
</subgrid>
|
||||
<item>5</item>
|
||||
</grid>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,301 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Test: Masonry layout with a subgrid</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="help" href="https://drats.csswg.org/css-grid-2">
|
||||
<link rel="match" href="masonry-subgrid-002-ref.html">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
|
||||
grid {
|
||||
display: inline-grid;
|
||||
grid-template-rows: 40px 30px 20px;
|
||||
grid-template-columns: masonry;
|
||||
gap: 4px 2px;
|
||||
padding: 1px 3px 5px 7px;
|
||||
border: solid;
|
||||
border-width: 3px 5px 1px 1px;
|
||||
background: lightgrey content-box;
|
||||
}
|
||||
.rows {
|
||||
grid-template-columns: 40px 30px 20px;
|
||||
grid-template-rows: masonry;
|
||||
}
|
||||
item {
|
||||
background: grey;
|
||||
width: 3ch;
|
||||
position: relative;
|
||||
}
|
||||
item:nth-child(2n) { background:purple; width:auto; }
|
||||
item:nth-child(1) {
|
||||
border: solid;
|
||||
border-width: 3px 5px 1px 1px;
|
||||
margin: 7px 1px 5px 3px;
|
||||
}
|
||||
subgrid {
|
||||
display: grid;
|
||||
grid-row: auto/span 2;
|
||||
grid-column: auto/span 2;
|
||||
grid: subgrid / subgrid;
|
||||
grid-gap: 6px 8px;
|
||||
background: yellow;
|
||||
}
|
||||
subgrid.definite {
|
||||
grid-row-start:2;
|
||||
}
|
||||
subgrid.extent {
|
||||
grid-row: auto/span 3;
|
||||
}
|
||||
.rows > subgrid.definite {
|
||||
grid-column-start:2;
|
||||
}
|
||||
.rows > subgrid.extent {
|
||||
grid-row: auto/span 2;
|
||||
grid-column: auto/span 3;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- auto-placed subgrid inhibits subgridding when parent is doing masonry layout ... -->
|
||||
<grid>
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<subgrid>
|
||||
<item>4a</item>
|
||||
<item>4b</item>
|
||||
<item>4c</item>
|
||||
</subgrid>
|
||||
<item>5</item>
|
||||
</grid>
|
||||
|
||||
<!-- ... unless it's auto-placed in the first track ... -->
|
||||
<grid>
|
||||
<item>1</item>
|
||||
<subgrid>
|
||||
<item>4a</item>
|
||||
<item>4b</item>
|
||||
<item>4c</item>
|
||||
</subgrid>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>5</item>
|
||||
</grid>
|
||||
|
||||
<!-- ... or has definite start position -->
|
||||
<grid>
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<subgrid class="definite">
|
||||
<item>4a</item>
|
||||
<item>4b</item>
|
||||
<item>4c</item>
|
||||
</subgrid>
|
||||
<item>5</item>
|
||||
</grid>
|
||||
|
||||
<!-- ... or span all tracks in the grid-axis -->
|
||||
<grid>
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<subgrid class="extent">
|
||||
<item>4a</item>
|
||||
<item>4b</item>
|
||||
<item>4c</item>
|
||||
</subgrid>
|
||||
<item>5</item>
|
||||
</grid>
|
||||
|
||||
<!-- auto-placed subgrid inhibits subgridding when parent is doing masonry layout ... -->
|
||||
<grid>
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<subgrid style="grid: subgrid / masonry">
|
||||
<item>4a</item>
|
||||
<item>4b</item>
|
||||
<item>4c</item>
|
||||
</subgrid>
|
||||
<item>5</item>
|
||||
</grid>
|
||||
|
||||
<!-- ... unless it's auto-placed in the first track ... -->
|
||||
<grid>
|
||||
<item>1</item>
|
||||
<subgrid style="grid: subgrid / masonry">
|
||||
<item>4a</item>
|
||||
<item>4b</item>
|
||||
<item>4c</item>
|
||||
</subgrid>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>5</item>
|
||||
</grid>
|
||||
|
||||
<!-- ... or has definite start position -->
|
||||
<grid>
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<subgrid class="definite">
|
||||
<item>4a</item>
|
||||
<item>4b</item>
|
||||
<item>4c</item>
|
||||
</subgrid>
|
||||
<item>5</item>
|
||||
</grid>
|
||||
|
||||
<!-- ... or span all tracks in the grid-axis -->
|
||||
<grid>
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<subgrid class="extent">
|
||||
<item>4a</item>
|
||||
<item>4b</item>
|
||||
<item>4c</item>
|
||||
</subgrid>
|
||||
<item>5</item>
|
||||
</grid>
|
||||
|
||||
<!-- auto-placed subgrid "inherits" masonry if it has a grid-axis of its own -->
|
||||
<grid>
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<subgrid style="grid: auto auto / subgrid">
|
||||
<item>4a</item>
|
||||
<item>4b</item>
|
||||
<item>4c</item>
|
||||
</subgrid>
|
||||
<item>5</item>
|
||||
</grid>
|
||||
|
||||
<!-- auto-placed subgrid inhibits subgridding when parent is doing masonry layout ... -->
|
||||
<grid class="rows">
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<subgrid>
|
||||
<item>4a</item>
|
||||
<item>4b</item>
|
||||
<item>4c</item>
|
||||
</subgrid>
|
||||
<item>5</item>
|
||||
</grid>
|
||||
|
||||
<!-- ... unless it's auto-placed in the first track ... -->
|
||||
<grid class="rows">
|
||||
<item>1</item>
|
||||
<subgrid>
|
||||
<item>4a</item>
|
||||
<item>4b</item>
|
||||
<item>4c</item>
|
||||
</subgrid>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>5</item>
|
||||
</grid>
|
||||
|
||||
<!-- ... or has definite start position -->
|
||||
<grid class="rows">
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<subgrid class="definite">
|
||||
<item>4a</item>
|
||||
<item>4b</item>
|
||||
<item>4c</item>
|
||||
</subgrid>
|
||||
<item>5</item>
|
||||
</grid>
|
||||
|
||||
<!-- ... or span all tracks in the grid-axis -->
|
||||
<grid class="rows">
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<subgrid class="extent">
|
||||
<item>4a</item>
|
||||
<item>4b</item>
|
||||
<item>4c</item>
|
||||
</subgrid>
|
||||
<item>5</item>
|
||||
</grid>
|
||||
|
||||
<!-- auto-placed subgrid inhibits subgridding when parent is doing masonry layout -->
|
||||
<grid class="rows">
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<subgrid style="grid: masonry / subgrid">
|
||||
<item>4a</item>
|
||||
<item>4b</item>
|
||||
<item>4c</item>
|
||||
</subgrid>
|
||||
<item>5</item>
|
||||
</grid>
|
||||
|
||||
<!-- ... unless it's auto-placed in the first track ... -->
|
||||
<grid class="rows">
|
||||
<item>1</item>
|
||||
<subgrid style="grid: masonry / subgrid">
|
||||
<item>4a</item>
|
||||
<item>4b</item>
|
||||
<item>4c</item>
|
||||
</subgrid>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<item>5</item>
|
||||
</grid>
|
||||
|
||||
<!-- ... or has definite start position -->
|
||||
<grid class="rows">
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<subgrid class="definite">
|
||||
<item>4a</item>
|
||||
<item>4b</item>
|
||||
<item>4c</item>
|
||||
</subgrid>
|
||||
<item>5</item>
|
||||
</grid>
|
||||
|
||||
<!-- ... or span all tracks in the grid-axis -->
|
||||
<grid class="rows">
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<subgrid class="extent">
|
||||
<item>4a</item>
|
||||
<item>4b</item>
|
||||
<item>4c</item>
|
||||
</subgrid>
|
||||
<item>5</item>
|
||||
</grid>
|
||||
|
||||
<!-- auto-placed subgrid "inherits" masonry if it has a grid-axis of its own -->
|
||||
<grid class="rows">
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
<subgrid style="grid: subgrid / auto auto">
|
||||
<item>4a</item>
|
||||
<item>4b</item>
|
||||
<item>4c</item>
|
||||
</subgrid>
|
||||
<item>5</item>
|
||||
</grid>
|
||||
|
||||
</body></html>
|
||||
Загрузка…
Ссылка в новой задаче