72 lines
1.9 KiB
HTML
72 lines
1.9 KiB
HTML
<!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>
|