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