@niche-works/style-layouts 0.2.0 → 0.3.1

package/core/styles.css

@@ -36,16 +36,14 @@
 .nws-layout-stack.nws-layout-direction-x.nws-layout-alignY-bottom {
   align-items: flex-end;
 }
-.nws-layout-stack.nws-layout-direction-x.nws-layout-childSizeX > * {
-  flex-basis: var(--nws-layout-childSizeX);
-}
-.nws-layout-stack.nws-layout-direction-x.nws-layout-childSizeY > * {
-  height: var(--nws-layout-childSizeY);
-}
 .nws-layout-stack.nws-layout-direction-x > * {
   flex-grow: 0;
   flex-shrink: 0;
   min-width: 0;
+  min-height: 0;
+}
+.nws-layout-stack.nws-layout-direction-x.nws-layout-childSizeX > * {
+  flex-basis: var(--nws-layout-childSizeX);
 }
 .nws-layout-stack.nws-layout-direction-x.nws-layout-adjustX-fit {
   justify-content: flex-start;
@@ -54,7 +52,6 @@
   flex-grow: 1;
   flex-shrink: 1;
   flex-basis: auto;
-  min-width: 0;
 }
 .nws-layout-stack.nws-layout-direction-x.nws-layout-adjustX-fit.nws-layout-childSizeX > * {
   flex-basis: var(--nws-layout-childSizeX);
@@ -65,8 +62,8 @@
 .nws-layout-stack.nws-layout-direction-x.nws-layout-adjustX-shrink > * {
   flex-shrink: 1;
 }
-.nws-layout-stack.nws-layout-direction-x > * {
-  min-height: 0;
+.nws-layout-stack.nws-layout-direction-x.nws-layout-childSizeY > * {
+  height: var(--nws-layout-childSizeY);
 }
 .nws-layout-stack.nws-layout-direction-x.nws-layout-adjustY-fit {
   align-items: stretch;
@@ -82,7 +79,6 @@
   min-height: 100%;
 }
 .nws-layout-stack.nws-layout-direction-x.nws-layout-adjustY-shrink > * {
-  min-height: 0;
   max-height: 100%;
 }
 .nws-layout-stack.nws-layout-direction-y {
@@ -115,14 +111,14 @@
 .nws-layout-stack.nws-layout-direction-y.nws-layout-alignY-spaceEvenly {
   justify-content: space-evenly;
 }
-.nws-layout-stack.nws-layout-direction-y.nws-layout-childSizeX > * {
-  width: var(--nws-layout-childSizeX);
-}
-.nws-layout-stack.nws-layout-direction-y.nws-layout-childSizeY > * {
-  flex-basis: var(--nws-layout-childSizeY);
-}
 .nws-layout-stack.nws-layout-direction-y > * {
+  flex-grow: 0;
+  flex-shrink: 0;
   min-width: 0;
+  min-height: 0;
+}
+.nws-layout-stack.nws-layout-direction-y.nws-layout-childSizeX > * {
+  width: var(--nws-layout-childSizeX);
 }
 .nws-layout-stack.nws-layout-direction-y.nws-layout-adjustX-fit {
   align-items: stretch;
@@ -138,13 +134,10 @@
   min-width: 100%;
 }
 .nws-layout-stack.nws-layout-direction-y.nws-layout-adjustX-shrink > * {
-  min-width: 0;
   max-width: 100%;
 }
-.nws-layout-stack.nws-layout-direction-y > * {
-  flex-grow: 0;
-  flex-shrink: 0;
-  min-height: 0;
+.nws-layout-stack.nws-layout-direction-y.nws-layout-childSizeY > * {
+  flex-basis: var(--nws-layout-childSizeY);
 }
 .nws-layout-stack.nws-layout-direction-y.nws-layout-adjustY-fit {
   justify-content: flex-start;
@@ -153,7 +146,6 @@
   flex-grow: 1;
   flex-shrink: 1;
   flex-basis: auto;
-  min-height: 0;
 }
 .nws-layout-stack.nws-layout-direction-y.nws-layout-adjustY-fit.nws-layout-childSizeY > * {
   flex-basis: var(--nws-layout-childSizeY);
@@ -168,10 +160,20 @@
   aspect-ratio: var(--nws-layout-childRatio);
 }
 .nws-layout-stack.nws-layout-gapX {
-  column-gap: var(--nws-layout-gapX);
+  margin-left: calc(var(--nws-layout-gapX) / -2);
+  margin-right: calc(var(--nws-layout-gapX) / -2);
+}
+.nws-layout-stack.nws-layout-gapX > * {
+  margin-left: calc(var(--nws-layout-gapX) / 2);
+  margin-right: calc(var(--nws-layout-gapX) / 2);
 }
 .nws-layout-stack.nws-layout-gapY {
-  row-gap: var(--nws-layout-gapY);
+  margin-top: calc(var(--nws-layout-gapY) / -2);
+  margin-bottom: calc(var(--nws-layout-gapY) / -2);
+}
+.nws-layout-stack.nws-layout-gapY > * {
+  margin-top: calc(var(--nws-layout-gapY) / 2);
+  margin-bottom: calc(var(--nws-layout-gapY) / 2);
 }
 
 .nws-layout-flow {
@@ -225,16 +227,14 @@
 .nws-layout-flow.nws-layout-direction-x.nws-layout-alignY-spaceEvenly {
   align-content: space-evenly;
 }
-.nws-layout-flow.nws-layout-direction-x.nws-layout-childSizeX > * {
-  flex-basis: var(--nws-layout-childSizeX);
-}
-.nws-layout-flow.nws-layout-direction-x.nws-layout-childSizeY > * {
-  height: var(--nws-layout-childSizeY);
-}
 .nws-layout-flow.nws-layout-direction-x > * {
   flex-grow: 0;
   flex-shrink: 0;
   min-width: 0;
+  min-height: 0;
+}
+.nws-layout-flow.nws-layout-direction-x.nws-layout-childSizeX > * {
+  flex-basis: var(--nws-layout-childSizeX);
 }
 .nws-layout-flow.nws-layout-direction-x.nws-layout-adjustX-fit {
   justify-content: flex-start;
@@ -243,7 +243,6 @@
   flex-grow: 1;
   flex-shrink: 1;
   flex-basis: auto;
-  min-width: 0;
 }
 .nws-layout-flow.nws-layout-direction-x.nws-layout-adjustX-fit.nws-layout-childSizeX > * {
   flex-basis: var(--nws-layout-childSizeX);
@@ -254,8 +253,8 @@
 .nws-layout-flow.nws-layout-direction-x.nws-layout-adjustX-shrink > * {
   flex-shrink: 1;
 }
-.nws-layout-flow.nws-layout-direction-x > * {
-  min-height: 0;
+.nws-layout-flow.nws-layout-direction-x.nws-layout-childSizeY > * {
+  height: var(--nws-layout-childSizeY);
 }
 .nws-layout-flow.nws-layout-direction-y {
   flex-direction: column;
@@ -299,20 +298,18 @@
 .nws-layout-flow.nws-layout-direction-y.nws-layout-alignY-spaceEvenly {
   justify-content: space-evenly;
 }
+.nws-layout-flow.nws-layout-direction-y > * {
+  flex-grow: 0;
+  flex-shrink: 0;
+  min-width: 0;
+  min-height: 0;
+}
 .nws-layout-flow.nws-layout-direction-y.nws-layout-childSizeX > * {
   width: var(--nws-layout-childSizeX);
 }
 .nws-layout-flow.nws-layout-direction-y.nws-layout-childSizeY > * {
   flex-basis: var(--nws-layout-childSizeY);
 }
-.nws-layout-flow.nws-layout-direction-y > * {
-  min-width: 0;
-}
-.nws-layout-flow.nws-layout-direction-y > * {
-  flex-grow: 0;
-  flex-shrink: 0;
-  min-height: 0;
-}
 .nws-layout-flow.nws-layout-direction-y.nws-layout-adjustY-fit {
   justify-content: flex-start;
 }
@@ -320,7 +317,6 @@
   flex-grow: 1;
   flex-shrink: 1;
   flex-basis: auto;
-  min-height: 0;
 }
 .nws-layout-flow.nws-layout-direction-y.nws-layout-adjustY-fit.nws-layout-childSizeY > * {
   flex-basis: var(--nws-layout-childSizeY);
@@ -335,10 +331,20 @@
   aspect-ratio: var(--nws-layout-childRatio);
 }
 .nws-layout-flow.nws-layout-gapX {
-  column-gap: var(--nws-layout-gapX);
+  margin-left: calc(var(--nws-layout-gapX) / -2);
+  margin-right: calc(var(--nws-layout-gapX) / -2);
+}
+.nws-layout-flow.nws-layout-gapX > * {
+  margin-left: calc(var(--nws-layout-gapX) / 2);
+  margin-right: calc(var(--nws-layout-gapX) / 2);
 }
 .nws-layout-flow.nws-layout-gapY {
-  row-gap: var(--nws-layout-gapY);
+  margin-top: calc(var(--nws-layout-gapY) / -2);
+  margin-bottom: calc(var(--nws-layout-gapY) / -2);
+}
+.nws-layout-flow.nws-layout-gapY > * {
+  margin-top: calc(var(--nws-layout-gapY) / 2);
+  margin-bottom: calc(var(--nws-layout-gapY) / 2);
 }
 
 .nws-layout-tile {
@@ -347,21 +353,129 @@
   --nws-layout-childSizeX: auto;
   --nws-layout-childSizeY: auto;
   --nws-layout-childRatio: auto;
-  --nws-layout-templateX: none;
-  --nws-layout-templateY: none;
-  --nws-layout-autoTracX: auto;
-  --nws-layout-autoTracY: auto;
   display: grid;
 }
+.nws-layout-tile > * {
+  min-width: 0;
+  min-height: 0;
+}
 .nws-layout-tile.nws-layout-direction-x {
   grid-auto-flow: row;
-  grid-template-columns: var(--nws-layout-templateX);
-  grid-auto-rows: var(--nws-layout-autoTracY);
+  grid-template-columns: repeat(auto-fit, minmax(max-content, 100%));
+}
+.nws-layout-tile.nws-layout-direction-x.nws-layout-childSizeX {
+  grid-template-columns: repeat(auto-fit, var(--nws-layout-childSizeX));
+}
+.nws-layout-tile.nws-layout-direction-x.nws-layout-adjustX-fit, .nws-layout-tile.nws-layout-direction-x.nws-layout-adjustX-grow, .nws-layout-tile.nws-layout-direction-x.nws-layout-adjustX-shrink {
+  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+}
+.nws-layout-tile.nws-layout-direction-x.nws-layout-adjustX-fit > *, .nws-layout-tile.nws-layout-direction-x.nws-layout-adjustX-grow > *, .nws-layout-tile.nws-layout-direction-x.nws-layout-adjustX-shrink > * {
+  width: auto;
+}
+.nws-layout-tile.nws-layout-direction-x.nws-layout-adjustX-fit.nws-layout-childSizeX {
+  grid-template-columns: repeat(auto-fit, minmax(clamp(0px, 100%, var(--nws-layout-childSizeX)), 1fr));
+}
+.nws-layout-tile.nws-layout-direction-x.nws-layout-adjustX-grow.nws-layout-childSizeX {
+  grid-template-columns: repeat(auto-fit, minmax(var(--nws-layout-childSizeX), 1fr));
+}
+.nws-layout-tile.nws-layout-direction-x.nws-layout-adjustX-shrink.nws-layout-childSizeX {
+  grid-template-columns: repeat(auto-fit, minmax(0, var(--nws-layout-childSizeX)));
+}
+.nws-layout-tile.nws-layout-direction-x {
+  grid-auto-rows: auto;
+}
+.nws-layout-tile.nws-layout-direction-x.nws-layout-adjustY-fit {
+  grid-auto-rows: minmax(0, 100%);
+  align-content: stretch;
+}
+.nws-layout-tile.nws-layout-direction-x.nws-layout-adjustY-fit > * {
+  height: auto;
+}
+.nws-layout-tile.nws-layout-direction-x.nws-layout-adjustY-grow {
+  grid-auto-rows: minmax(auto, 100%);
+}
+.nws-layout-tile.nws-layout-direction-x.nws-layout-adjustY-grow > * {
+  max-height: 100%;
+  height: 100%;
+}
+.nws-layout-tile.nws-layout-direction-x.nws-layout-adjustY-grow.nws-layout-childSizeY {
+  grid-auto-rows: minmax(var(--nws-layout-childSizeY), 100%);
+}
+.nws-layout-tile.nws-layout-direction-x.nws-layout-adjustY-grow.nws-layout-childSizeY > * {
+  min-height: var(--nws-layout-childSizeY);
+}
+.nws-layout-tile.nws-layout-direction-x.nws-layout-adjustY-shrink {
+  grid-auto-rows: minmax(0, auto);
+}
+.nws-layout-tile.nws-layout-direction-x.nws-layout-adjustY-shrink > * {
+  min-height: 100%;
+  height: 100%;
+}
+.nws-layout-tile.nws-layout-direction-x.nws-layout-adjustY-shrink.nws-layout-childSizeY {
+  grid-auto-rows: minmax(0, var(--nws-layout-childSizeY));
+}
+.nws-layout-tile.nws-layout-direction-x.nws-layout-adjustY-shrink.nws-layout-childSizeY > * {
+  max-height: var(--nws-layout-childSizeY);
 }
 .nws-layout-tile.nws-layout-direction-y {
   grid-auto-flow: column;
-  grid-auto-columns: var(--nws-layout-autoTracX);
-  grid-template-rows: var(--nws-layout-templateY);
+  grid-auto-columns: auto;
+}
+.nws-layout-tile.nws-layout-direction-y.nws-layout-adjustX-fit > *, .nws-layout-tile.nws-layout-direction-y.nws-layout-adjustX-grow > *, .nws-layout-tile.nws-layout-direction-y.nws-layout-adjustX-shrink > * {
+  width: auto;
+}
+.nws-layout-tile.nws-layout-direction-y.nws-layout-adjustX-fit {
+  grid-auto-columns: minmax(0, 100%);
+}
+.nws-layout-tile.nws-layout-direction-y.nws-layout-adjustX-grow {
+  grid-auto-columns: minmax(auto, 100%);
+}
+.nws-layout-tile.nws-layout-direction-y.nws-layout-adjustX-grow.nws-layout-childSizeX {
+  grid-auto-columns: minmax(var(--nws-layout-childSizeX), 100%);
+}
+.nws-layout-tile.nws-layout-direction-y.nws-layout-adjustX-shrink {
+  grid-auto-columns: minmax(0, auto);
+}
+.nws-layout-tile.nws-layout-direction-y.nws-layout-adjustX-shrink.nws-layout-childSizeX {
+  grid-auto-columns: minmax(0, var(--nws-layout-childSizeX));
+}
+.nws-layout-tile.nws-layout-direction-y {
+  grid-template-rows: repeat(auto-fit, minmax(max-content, 100%));
+}
+.nws-layout-tile.nws-layout-direction-y.nws-layout-childSizeY {
+  grid-template-rows: repeat(auto-fit, var(--nws-layout-childSizeY));
+}
+.nws-layout-tile.nws-layout-direction-y.nws-layout-adjustY-fit, .nws-layout-tile.nws-layout-direction-y.nws-layout-adjustY-grow, .nws-layout-tile.nws-layout-direction-y.nws-layout-adjustY-shrink {
+  grid-template-rows: repeat(auto-fit, minmax(0, 1fr));
+}
+.nws-layout-tile.nws-layout-direction-y.nws-layout-adjustY-fit {
+  align-content: stretch;
+}
+.nws-layout-tile.nws-layout-direction-y.nws-layout-adjustY-fit > * {
+  height: auto;
+}
+.nws-layout-tile.nws-layout-direction-y.nws-layout-adjustY-fit.nws-layout-childSizeY {
+  grid-template-rows: repeat(auto-fit, minmax(clamp(0px, 100%, var(--nws-layout-childSizeY)), 1fr));
+}
+.nws-layout-tile.nws-layout-direction-y.nws-layout-adjustY-grow > * {
+  max-height: 100%;
+  height: 100%;
+}
+.nws-layout-tile.nws-layout-direction-y.nws-layout-adjustY-grow.nws-layout-childSizeY {
+  grid-template-rows: repeat(auto-fit, minmax(var(--nws-layout-childSizeY), 1fr));
+}
+.nws-layout-tile.nws-layout-direction-y.nws-layout-adjustY-grow.nws-layout-childSizeY > * {
+  min-height: var(--nws-layout-childSizeY);
+}
+.nws-layout-tile.nws-layout-direction-y.nws-layout-adjustY-shrink > * {
+  min-height: 100%;
+  height: 100%;
+}
+.nws-layout-tile.nws-layout-direction-y.nws-layout-adjustY-shrink.nws-layout-childSizeY {
+  grid-template-rows: repeat(auto-fit, minmax(0, var(--nws-layout-childSizeY)));
+}
+.nws-layout-tile.nws-layout-direction-y.nws-layout-adjustY-shrink.nws-layout-childSizeY > * {
+  max-height: var(--nws-layout-childSizeY);
 }
 .nws-layout-tile.nws-layout-alignX-left {
   justify-content: flex-start;
@@ -405,41 +519,6 @@
 .nws-layout-tile.nws-layout-childSizeY > * {
   height: var(--nws-layout-childSizeY);
 }
-.nws-layout-tile > * {
-  min-width: 0;
-}
-.nws-layout-tile.nws-layout-adjustX-fit > * {
-  width: auto;
-}
-.nws-layout-tile.nws-layout-adjustX-grow > * {
-  width: auto;
-}
-.nws-layout-tile.nws-layout-adjustX-shrink > * {
-  width: auto;
-}
-.nws-layout-tile > * {
-  min-height: 0;
-}
-.nws-layout-tile.nws-layout-adjustY-fit {
-  align-content: stretch;
-}
-.nws-layout-tile.nws-layout-adjustY-fit > * {
-  height: auto;
-}
-.nws-layout-tile.nws-layout-adjustY-grow > * {
-  max-height: 100%;
-  height: 100%;
-}
-.nws-layout-tile.nws-layout-adjustY-grow.nws-layout-childSizeY > * {
-  min-height: var(--nws-layout-childSizeY);
-}
-.nws-layout-tile.nws-layout-adjustY-shrink > * {
-  min-height: 100%;
-  height: 100%;
-}
-.nws-layout-tile.nws-layout-adjustY-shrink.nws-layout-childSizeY > * {
-  max-height: var(--nws-layout-childSizeY);
-}
 .nws-layout-tile.nws-layout-childRatio > * {
   aspect-ratio: var(--nws-layout-childRatio);
 }
@@ -453,20 +532,20 @@
 .nws-layout-matrix {
   --nws-layout-gapX: 0px;
   --nws-layout-gapY: 0px;
+  --nws-layout-childSizeX: auto;
+  --nws-layout-childSizeY: auto;
   --nws-layout-childRatio: auto;
+  --nws-layout-childCountX: auto-fit;
+  --nws-layout-childCountY: auto-fit;
   --nws-layout-templateX: none;
   --nws-layout-templateY: none;
   display: grid;
 }
 .nws-layout-matrix.nws-layout-direction-x {
   grid-auto-flow: row;
-  grid-template-columns: var(--nws-layout-templateX);
-  grid-template-rows: var(--nws-layout-templateY);
 }
 .nws-layout-matrix.nws-layout-direction-y {
   grid-auto-flow: column;
-  grid-template-columns: var(--nws-layout-templateX);
-  grid-template-rows: var(--nws-layout-templateY);
 }
 .nws-layout-matrix.nws-layout-alignX-left {
   justify-content: flex-start;
@@ -504,6 +583,102 @@
 .nws-layout-matrix.nws-layout-alignY-spaceEvenly {
   align-content: space-evenly;
 }
+.nws-layout-matrix {
+  grid-template-columns: repeat(auto-fit, auto);
+}
+.nws-layout-matrix.nws-layout-childSizeX {
+  grid-template-columns: repeat(auto-fit, var(--nws-layout-childSizeX));
+}
+.nws-layout-matrix.nws-layout-childSizeX.nws-layout-childCountX {
+  grid-template-columns: repeat(var(--nws-layout-childCountX), var(--nws-layout-childSizeX));
+}
+.nws-layout-matrix.nws-layout-childCountX {
+  grid-template-columns: repeat(var(--nws-layout-childCountX), auto);
+}
+.nws-layout-matrix.nws-layout-templateX {
+  grid-template-columns: var(--nws-layout-templateX);
+}
+.nws-layout-matrix.nws-layout-adjustX-fit {
+  grid-template-columns: repeat(auto-fit, 1fr);
+}
+.nws-layout-matrix.nws-layout-adjustX-fit.nws-layout-childSizeX {
+  grid-template-columns: repeat(auto-fit, minmax(clamp(0px, 100%, var(--nws-layout-childSizeX)), 1fr));
+}
+.nws-layout-matrix.nws-layout-adjustX-fit.nws-layout-childSizeX.nws-layout-childCountX {
+  grid-template-columns: repeat(var(--nws-layout-childCountX), minmax(clamp(0px, (100% - var(--nws-layout-gapX) * (var(--nws-layout-childCountX) - 1)) / var(--nws-layout-childCountX), var(--nws-layout-childSizeX)), 1fr));
+}
+.nws-layout-matrix.nws-layout-adjustX-fit.nws-layout-childCountX {
+  grid-template-columns: repeat(var(--nws-layout-childCountX), 1fr);
+}
+.nws-layout-matrix.nws-layout-adjustX-grow {
+  grid-template-columns: repeat(auto-fit, 1fr);
+}
+.nws-layout-matrix.nws-layout-adjustX-grow.nws-layout-childSizeX {
+  grid-template-columns: repeat(auto-fit, minmax(var(--nws-layout-childSizeX), 1fr));
+}
+.nws-layout-matrix.nws-layout-adjustX-grow.nws-layout-childSizeX.nws-layout-childCountX {
+  grid-template-columns: repeat(var(--nws-layout-childCountX), minmax(var(--nws-layout-childSizeX), 1fr));
+}
+.nws-layout-matrix.nws-layout-adjustX-grow.nws-layout-childCountX {
+  grid-template-columns: repeat(var(--nws-layout-childCountX), 1fr);
+}
+.nws-layout-matrix.nws-layout-adjustX-shrink.nws-layout-childSizeX {
+  grid-template-columns: repeat(auto-fit, minmax(0, var(--nws-layout-childSizeX)));
+}
+.nws-layout-matrix.nws-layout-adjustX-shrink.nws-layout-childSizeX.nws-layout-childCountX {
+  grid-template-columns: repeat(var(--nws-layout-childCountX), minmax(0, var(--nws-layout-childSizeX)));
+}
+.nws-layout-matrix.nws-layout-adjustX-shrink.nws-layout-childCountX {
+  grid-template-columns: repeat(var(--nws-layout-childCountX), auto);
+}
+.nws-layout-matrix {
+  grid-template-rows: repeat(auto-fit, auto);
+}
+.nws-layout-matrix.nws-layout-childSizeY {
+  grid-template-rows: repeat(auto-fit, var(--nws-layout-childSizeY));
+}
+.nws-layout-matrix.nws-layout-childSizeY.nws-layout-childCountY {
+  grid-template-rows: repeat(var(--nws-layout-childCountY), var(--nws-layout-childSizeY));
+}
+.nws-layout-matrix.nws-layout-childCountY {
+  grid-template-rows: repeat(var(--nws-layout-childCountY), auto);
+}
+.nws-layout-matrix.nws-layout-templateY {
+  grid-template-rows: var(--nws-layout-templateY);
+}
+.nws-layout-matrix.nws-layout-adjustY-fit {
+  grid-template-rows: repeat(auto-fit, 1fr);
+}
+.nws-layout-matrix.nws-layout-adjustY-fit.nws-layout-childSizeY {
+  grid-template-rows: repeat(auto-fit, minmax(clamp(0px, 100%, var(--nws-layout-childSizeY)), 1fr));
+}
+.nws-layout-matrix.nws-layout-adjustY-fit.nws-layout-childSizeY.nws-layout-childCountY {
+  grid-template-rows: repeat(var(--nws-layout-childCountY), minmax(clamp(0px, (100% - var(--nws-layout-gapY) * (var(--nws-layout-childCountY) - 1)) / var(--nws-layout-childCountY), var(--nws-layout-childSizeY)), 1fr));
+}
+.nws-layout-matrix.nws-layout-adjustY-fit.nws-layout-childCountY {
+  grid-template-rows: repeat(var(--nws-layout-childCountY), 1fr);
+}
+.nws-layout-matrix.nws-layout-adjustY-grow {
+  grid-template-rows: repeat(auto-fit, 1fr);
+}
+.nws-layout-matrix.nws-layout-adjustY-grow.nws-layout-childSizeY {
+  grid-template-rows: repeat(auto-fit, minmax(var(--nws-layout-childSizeY), 1fr));
+}
+.nws-layout-matrix.nws-layout-adjustY-grow.nws-layout-childSizeY.nws-layout-childCountY {
+  grid-template-rows: repeat(var(--nws-layout-childCountY), minmax(var(--nws-layout-childSizeY), 1fr));
+}
+.nws-layout-matrix.nws-layout-adjustY-grow.nws-layout-childCountY {
+  grid-template-rows: repeat(var(--nws-layout-childCountY), 1fr);
+}
+.nws-layout-matrix.nws-layout-adjustY-shrink.nws-layout-childSizeY {
+  grid-template-rows: repeat(auto-fit, minmax(0, var(--nws-layout-childSizeY)));
+}
+.nws-layout-matrix.nws-layout-adjustY-shrink.nws-layout-childSizeY.nws-layout-childCountY {
+  grid-template-rows: repeat(var(--nws-layout-childCountY), minmax(0, var(--nws-layout-childSizeY)));
+}
+.nws-layout-matrix.nws-layout-adjustY-shrink.nws-layout-childCountY {
+  grid-template-rows: repeat(var(--nws-layout-childCountY), auto);
+}
 .nws-layout-matrix.nws-layout-childRatio > * {
   aspect-ratio: var(--nws-layout-childRatio);
 }
@@ -521,9 +696,8 @@
   --nws-layout-childSizeY: auto;
   --nws-layout-childRatio: auto;
   display: flex;
-  justify-content: safe center;
-  align-content: safe center;
-  align-items: flex-start;
+  justify-content: flex-start;
+  align-content: flex-start;
   flex-wrap: nowrap;
 }
 .nws-layout-center > * {
@@ -536,17 +710,23 @@
 .nws-layout-center.nws-layout-direction-x {
   flex-direction: row;
 }
-.nws-layout-center.nws-layout-direction-x.nws-layout-childSizeX > * {
-  width: var(--nws-layout-childSizeX);
-  flex-basis: var(--nws-layout-childSizeX);
-}
 .nws-layout-center.nws-layout-direction-x > * {
   max-width: none;
+  max-height: none;
   flex-grow: 0;
   flex-shrink: 0;
+  margin-top: auto;
+  margin-bottom: auto;
+}
+.nws-layout-center.nws-layout-direction-x > *:first-child {
+  margin-left: auto;
+}
+.nws-layout-center.nws-layout-direction-x > *:last-child {
+  margin-right: auto;
 }
-.nws-layout-center.nws-layout-direction-x.nws-layout-adjustX-fit {
-  justify-content: stretch;
+.nws-layout-center.nws-layout-direction-x.nws-layout-childSizeX > * {
+  width: var(--nws-layout-childSizeX);
+  flex-basis: var(--nws-layout-childSizeX);
 }
 .nws-layout-center.nws-layout-direction-x.nws-layout-adjustX-fit > * {
   width: 100%;
@@ -555,32 +735,22 @@
   flex-shrink: 1;
   flex-basis: 0%;
 }
-.nws-layout-center.nws-layout-direction-x.nws-layout-adjustX-grow {
-  justify-content: stretch;
-}
 .nws-layout-center.nws-layout-direction-x.nws-layout-adjustX-grow > * {
   width: 100%;
   min-width: var(--nws-layout-childSizeX);
   max-width: none;
   flex-grow: 1;
-  flex-shrink: 0;
   flex-basis: var(--nws-layout-childSizeX);
 }
 .nws-layout-center.nws-layout-direction-x.nws-layout-adjustX-shrink > * {
   width: var(--nws-layout-childSizeX);
   max-width: 100%;
-  flex-grow: 0;
   flex-shrink: 1;
   flex-basis: var(--nws-layout-childSizeX);
 }
 .nws-layout-center.nws-layout-direction-x.nws-layout-childSizeY > * {
   height: var(--nws-layout-childSizeY);
 }
-.nws-layout-center.nws-layout-direction-x > * {
-  max-height: none;
-  margin-top: auto;
-  margin-bottom: auto;
-}
 .nws-layout-center.nws-layout-direction-x.nws-layout-adjustY-fit {
   align-items: stretch;
 }
@@ -602,17 +772,40 @@
   margin-top: auto;
   margin-bottom: auto;
 }
+.nws-layout-center.nws-layout-direction-x.nws-layout-gapX {
+  margin-left: calc(var(--nws-layout-gapX) / -2);
+  margin-right: calc(var(--nws-layout-gapX) / -2);
+}
+.nws-layout-center.nws-layout-direction-x.nws-layout-gapX > * {
+  margin-left: calc(var(--nws-layout-gapX) / 2);
+  margin-right: calc(var(--nws-layout-gapX) / 2);
+}
+.nws-layout-center.nws-layout-direction-x.nws-layout-gapX > *:first-child {
+  margin-left: auto;
+}
+.nws-layout-center.nws-layout-direction-x.nws-layout-gapX > *:last-child {
+  margin-right: auto;
+}
 .nws-layout-center.nws-layout-direction-y {
   flex-direction: column;
 }
-.nws-layout-center.nws-layout-direction-y.nws-layout-childSizeX > * {
-  width: var(--nws-layout-childSizeX);
-}
 .nws-layout-center.nws-layout-direction-y > * {
   max-width: none;
+  max-height: none;
+  flex-grow: 0;
+  flex-shrink: 0;
   margin-left: auto;
   margin-right: auto;
 }
+.nws-layout-center.nws-layout-direction-y > *:first-child {
+  margin-top: auto;
+}
+.nws-layout-center.nws-layout-direction-y > *:last-child {
+  margin-bottom: auto;
+}
+.nws-layout-center.nws-layout-direction-y.nws-layout-childSizeX > * {
+  width: var(--nws-layout-childSizeX);
+}
 .nws-layout-center.nws-layout-direction-y.nws-layout-adjustX-fit {
   align-items: stretch;
 }
@@ -625,8 +818,8 @@
 }
 .nws-layout-center.nws-layout-direction-y.nws-layout-adjustX-grow > * {
   width: 100%;
-  max-width: none;
   min-width: var(--nws-layout-childSizeX);
+  max-width: none;
 }
 .nws-layout-center.nws-layout-direction-y.nws-layout-adjustX-shrink > * {
   width: var(--nws-layout-childSizeX);
@@ -638,14 +831,6 @@
   height: var(--nws-layout-childSizeY);
   flex-basis: var(--nws-layout-childSizeY);
 }
-.nws-layout-center.nws-layout-direction-y > * {
-  max-height: none;
-  flex-grow: 0;
-  flex-shrink: 0;
-}
-.nws-layout-center.nws-layout-direction-y.nws-layout-adjustY-fit {
-  justify-content: stretch;
-}
 .nws-layout-center.nws-layout-direction-y.nws-layout-adjustY-fit > * {
   height: 100%;
   max-height: none;
@@ -653,32 +838,35 @@
   flex-shrink: 1;
   flex-basis: 0%;
 }
-.nws-layout-center.nws-layout-direction-y.nws-layout-adjustY-grow {
-  justify-content: stretch;
-}
 .nws-layout-center.nws-layout-direction-y.nws-layout-adjustY-grow > * {
   height: 100%;
   min-height: var(--nws-layout-childSizeY);
   max-height: none;
   flex-grow: 1;
-  flex-shrink: 0;
   flex-basis: var(--nws-layout-childSizeY);
 }
 .nws-layout-center.nws-layout-direction-y.nws-layout-adjustY-shrink > * {
   height: var(--nws-layout-childSizeY);
   max-height: 100%;
-  flex-grow: 0;
   flex-shrink: 1;
   flex-basis: var(--nws-layout-childSizeY);
 }
-.nws-layout-center.nws-layout-childRatio > * {
-  aspect-ratio: var(--nws-layout-childRatio);
+.nws-layout-center.nws-layout-direction-y.nws-layout-gapY {
+  margin-top: calc(var(--nws-layout-gapY) / -2);
+  margin-bottom: calc(var(--nws-layout-gapY) / -2);
 }
-.nws-layout-center.nws-layout-gapX {
-  column-gap: var(--nws-layout-gapX);
+.nws-layout-center.nws-layout-direction-y.nws-layout-gapY > * {
+  margin-top: calc(var(--nws-layout-gapY) / 2);
+  margin-bottom: calc(var(--nws-layout-gapY) / 2);
 }
-.nws-layout-center.nws-layout-gapY {
-  row-gap: var(--nws-layout-gapY);
+.nws-layout-center.nws-layout-direction-y.nws-layout-gapY > *:first-child {
+  margin-top: auto;
+}
+.nws-layout-center.nws-layout-direction-y.nws-layout-gapY > *:last-child {
+  margin-bottom: auto;
+}
+.nws-layout-center.nws-layout-childRatio > * {
+  aspect-ratio: var(--nws-layout-childRatio);
 }
 
 .nws-layout-pack {
@@ -689,13 +877,15 @@
   justify-content: flex-start;
   align-items: stretch;
 }
+.nws-layout-pack > * {
+  flex-basis: 0;
+  flex-grow: 1;
+  flex-shrink: 1;
+}
 .nws-layout-pack.nws-layout-direction-x {
   flex-direction: row;
 }
 .nws-layout-pack.nws-layout-direction-x > * {
-  flex-basis: 0;
-  flex-grow: 1;
-  flex-shrink: 1;
   min-width: 0;
   min-height: 100%;
   max-height: 100%;
@@ -704,18 +894,25 @@
   flex-direction: column;
 }
 .nws-layout-pack.nws-layout-direction-y > * {
-  flex-basis: 0;
-  flex-grow: 1;
-  flex-shrink: 1;
   min-height: 0;
   min-width: 100%;
   max-width: 100%;
 }
 .nws-layout-pack.nws-layout-gapX {
-  column-gap: var(--nws-layout-gapX);
+  margin-left: calc(var(--nws-layout-gapX) / -2);
+  margin-right: calc(var(--nws-layout-gapX) / -2);
+}
+.nws-layout-pack.nws-layout-gapX > * {
+  margin-left: calc(var(--nws-layout-gapX) / 2);
+  margin-right: calc(var(--nws-layout-gapX) / 2);
 }
 .nws-layout-pack.nws-layout-gapY {
-  row-gap: var(--nws-layout-gapY);
+  margin-top: calc(var(--nws-layout-gapY) / -2);
+  margin-bottom: calc(var(--nws-layout-gapY) / -2);
+}
+.nws-layout-pack.nws-layout-gapY > * {
+  margin-top: calc(var(--nws-layout-gapY) / 2);
+  margin-bottom: calc(var(--nws-layout-gapY) / 2);
 }
 
 .nws-layout-balance {
@@ -742,13 +939,13 @@
   justify-items: flex-end;
 }
 .nws-layout-balance.nws-layout-alignX-spaceBetween {
-  justify-items: space-between;
+  justify-content: space-between;
 }
 .nws-layout-balance.nws-layout-alignX-spaceAround {
-  justify-items: space-around;
+  justify-content: space-around;
 }
 .nws-layout-balance.nws-layout-alignX-spaceEvenly {
-  justify-items: space-evenly;
+  justify-content: space-evenly;
 }
 .nws-layout-balance.nws-layout-alignY-top {
   align-items: flex-start;
@@ -760,22 +957,20 @@
   align-items: flex-end;
 }
 .nws-layout-balance.nws-layout-alignY-spaceBetween {
-  align-items: space-between;
+  align-content: space-between;
 }
 .nws-layout-balance.nws-layout-alignY-spaceAround {
-  align-items: space-around;
+  align-content: space-around;
 }
 .nws-layout-balance.nws-layout-alignY-spaceEvenly {
-  align-items: space-evenly;
-}
-.nws-layout-balance.nws-layout-childSizeX > * {
-  width: var(--nws-layout-childSizeX);
-}
-.nws-layout-balance.nws-layout-childSizeY > * {
-  height: var(--nws-layout-childSizeY);
+  align-content: space-evenly;
 }
 .nws-layout-balance > * {
   min-width: 0;
+  min-height: 0;
+}
+.nws-layout-balance.nws-layout-childSizeX > * {
+  width: var(--nws-layout-childSizeX);
 }
 .nws-layout-balance.nws-layout-adjustX-fit {
   justify-items: stretch;
@@ -783,23 +978,17 @@
 .nws-layout-balance.nws-layout-adjustX-fit > * {
   width: auto;
 }
-.nws-layout-balance.nws-layout-adjustX-fit.nws-layout-childSizeX > * {
-  width: auto;
-}
-.nws-layout-balance.nws-layout-adjustX-grow > * {
+.nws-layout-balance.nws-layout-adjustX-grow > *, .nws-layout-balance.nws-layout-adjustX-shrink > * {
   width: 100%;
 }
 .nws-layout-balance.nws-layout-adjustX-grow.nws-layout-childSizeX > * {
   min-width: var(--nws-layout-childSizeX);
 }
-.nws-layout-balance.nws-layout-adjustX-shrink > * {
-  width: 100%;
-}
 .nws-layout-balance.nws-layout-adjustX-shrink.nws-layout-childSizeX > * {
   max-width: var(--nws-layout-childSizeX);
 }
-.nws-layout-balance > * {
-  min-height: 0;
+.nws-layout-balance.nws-layout-childSizeY > * {
+  height: var(--nws-layout-childSizeY);
 }
 .nws-layout-balance.nws-layout-adjustY-fit {
   align-items: stretch;
@@ -807,18 +996,12 @@
 .nws-layout-balance.nws-layout-adjustY-fit > * {
   height: auto;
 }
-.nws-layout-balance.nws-layout-adjustY-fit.nws-layout-childSizeY > * {
-  height: auto;
-}
-.nws-layout-balance.nws-layout-adjustY-grow > * {
+.nws-layout-balance.nws-layout-adjustY-grow > *, .nws-layout-balance.nws-layout-adjustY-shrink > * {
   height: 100%;
 }
 .nws-layout-balance.nws-layout-adjustY-grow.nws-layout-childSizeY > * {
   min-height: var(--nws-layout-childSizeY);
 }
-.nws-layout-balance.nws-layout-adjustY-shrink > * {
-  height: 100%;
-}
 .nws-layout-balance.nws-layout-adjustY-shrink.nws-layout-childSizeY > * {
   max-height: var(--nws-layout-childSizeY);
 }
@@ -865,33 +1048,25 @@
 .nws-layout-layer.nws-layout-childSizeY > * {
   height: var(--nws-layout-childSizeY);
 }
-.nws-layout-layer.nws-layout-adjustX-fit > * {
+.nws-layout-layer.nws-layout-adjustX-fit > *, .nws-layout-layer.nws-layout-adjustX-grow > * {
   justify-self: stretch;
   width: auto;
 }
 .nws-layout-layer.nws-layout-adjustX-grow > * {
-  justify-self: stretch;
-  width: auto;
   min-width: var(--nws-layout-childSizeX);
 }
 .nws-layout-layer.nws-layout-adjustX-shrink > * {
   width: clamp(0px, 100%, var(--nws-layout-childSizeX));
-  min-width: 0;
-  max-width: 100%;
 }
-.nws-layout-layer.nws-layout-adjustY-fit > * {
+.nws-layout-layer.nws-layout-adjustY-fit > *, .nws-layout-layer.nws-layout-adjustY-grow > * {
   align-self: stretch;
   height: auto;
 }
 .nws-layout-layer.nws-layout-adjustY-grow > * {
-  align-self: stretch;
-  height: auto;
   min-height: var(--nws-layout-childSizeY);
 }
 .nws-layout-layer.nws-layout-adjustY-shrink > * {
   height: clamp(0px, 100%, var(--nws-layout-childSizeY));
-  min-height: 0;
-  max-height: 100%;
 }
 .nws-layout-layer.nws-layout-childRatio > * {
   aspect-ratio: var(--nws-layout-childRatio);
@@ -900,6 +1075,7 @@
 .nws-layout-pin {
   --nws-layout-childSizeX: auto;
   --nws-layout-childSizeY: auto;
+  --nws-layout-childRatio: auto;
   display: block;
   position: relative;
 }