| <!DOCTYPE html> |
| <meta charset="utf-8"> |
| <title>CSS Grid Test: Specified alignment properties in subgridded axes</title> |
| <link rel="author" title="Ethan Jimenez" href="mailto:ethavar@microsoft.com"> |
| <link rel="help" href="https://drafts.csswg.org/css-grid-2/#subgrid-box-alignment"> |
| <link rel="match" href="alignment-in-subgridded-axes-002-ref.html"> |
| <style> |
| div { |
| display: inline-grid; |
| gap: 5px; |
| } |
| |
| .grid { grid-template: 50px / 50px } |
| .vlr { writing-mode: vertical-lr } |
| |
| .subgrid { |
| background: gray; |
| grid-template: subgrid / subgrid; |
| } |
| |
| .item { |
| background: orange; |
| height: 20px; |
| width: 20px; |
| } |
| |
| .as { align-self: start } |
| .ae { align-self: end } |
| .ac { align-self: center } |
| .ab { align-self: baseline } |
| |
| .js { justify-self: start } |
| .je { justify-self: end } |
| .jc { justify-self: center } |
| .jb { justify-self: baseline } |
| </style> |
| <div id="wrapper"></div> |
| |
| <template id="grid"> |
| <div class="grid"> |
| <div class="subgrid"> |
| <div class="item"></div> |
| </div> |
| </div> |
| </template> |
| |
| <script> |
| "use strict"; |
| |
| let align_properties = ["as", "ae", "ac", "ab"]; |
| let justify_properties = ["js", "je", "jc", "jb"]; |
| let wrapper = document.getElementById("wrapper"); |
| |
| wrapper.style.gridTemplateColumns = `repeat(${justify_properties.length * 2}, 50px)`; |
| |
| for (let align_self of align_properties) { |
| // Add a grid for all combinations of `align-self` and `justify-self`. |
| for (let justify_self of justify_properties) { |
| let grid = document.getElementById("grid").content.cloneNode(true); |
| grid.querySelector(".item").classList.add(align_self, justify_self); |
| wrapper.appendChild(grid); |
| } |
| |
| // Add all combinations again, but make the subgrid orthogonal. |
| for (let justify_self of justify_properties) { |
| let grid = document.getElementById("grid").content.cloneNode(true); |
| grid.querySelector(".item").classList.add(align_self, justify_self); |
| grid.querySelector(".subgrid").classList.add("vlr"); |
| wrapper.appendChild(grid); |
| } |
| } |
| </script> |
