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