diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid')
4 files changed, 991 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/masonry-subgrid-001-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/masonry-subgrid-001-ref.html new file mode 100644 index 0000000000..25ec77bc51 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/masonry-subgrid-001-ref.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> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/masonry-subgrid-001.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/masonry-subgrid-001.html new file mode 100644 index 0000000000..de07dfb78d --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/masonry-subgrid-001.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> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/masonry-subgrid-002-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/masonry-subgrid-002-ref.html new file mode 100644 index 0000000000..4750c1899e --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/masonry-subgrid-002-ref.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> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/masonry-subgrid-002.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/masonry-subgrid-002.html new file mode 100644 index 0000000000..466e95eb03 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/masonry-subgrid-002.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> |