| <!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> |