alignment-in-subgridded-axes-002-ref.html (1857B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>Reference: Specified alignment properties in subgridded axes</title> 4 <link rel="author" title="Ethan Jimenez" href="mailto:ethavar@microsoft.com"> 5 <link rel="help" href="https://drafts.csswg.org/css-grid-2/#subgrid-box-alignment"> 6 <style> 7 div { 8 display: inline-grid; 9 gap: 5px; 10 } 11 12 .grid { grid-template: 50px / 50px } 13 .vlr { writing-mode: vertical-lr } 14 .subgrid { background: gray } 15 16 .item { 17 background: orange; 18 height: 20px; 19 width: 20px; 20 } 21 22 .as { align-self: start } 23 .ae { align-self: end } 24 .ac { align-self: center } 25 .ab { align-self: baseline } 26 27 .js { justify-self: start } 28 .je { justify-self: end } 29 .jc { justify-self: center } 30 .jb { justify-self: baseline } 31 </style> 32 <div id="wrapper"></div> 33 34 <template id="grid"> 35 <div class="grid"> 36 <div class="subgrid"> 37 <div class="item"></div> 38 </div> 39 </div> 40 </template> 41 42 <script> 43 "use strict"; 44 45 let align_properties = ["as", "ae", "ac", "ab"]; 46 let justify_properties = ["js", "je", "jc", "jb"]; 47 let wrapper = document.getElementById("wrapper"); 48 49 wrapper.style.gridTemplateColumns = `repeat(${justify_properties.length * 2}, 50px)`; 50 51 for (let align_self of align_properties) { 52 // Add a grid for all combinations of `align-self` and `justify-self`. 53 for (let justify_self of justify_properties) { 54 let grid = document.getElementById("grid").content.cloneNode(true); 55 grid.querySelector(".item").classList.add(align_self, justify_self); 56 wrapper.appendChild(grid); 57 } 58 59 // Add all combinations again, but make the subgrid orthogonal. 60 for (let justify_self of justify_properties) { 61 let grid = document.getElementById("grid").content.cloneNode(true); 62 grid.querySelector(".item").classList.add(align_self, justify_self); 63 grid.querySelector(".subgrid").classList.add("vlr"); 64 wrapper.appendChild(grid); 65 } 66 } 67 </script>