@niche-works/style-layouts 0.2.0 → 0.3.0

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;
@@ -115,14 +112,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;
@@ -141,10 +138,8 @@
   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 +148,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 +162,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 +229,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 +245,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 +255,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 +300,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 +319,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 +333,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 +355,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 +521,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 +534,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 +585,108 @@
 .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 {
+  grid-template-columns: repeat(auto-fit, auto);
+}
+.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 {
+  grid-template-rows: repeat(auto-fit, auto);
+}
+.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 +704,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,14 +718,22 @@
 .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;
   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-childSizeX > * {
+  width: var(--nws-layout-childSizeX);
+  flex-basis: var(--nws-layout-childSizeX);
 }
 .nws-layout-center.nws-layout-direction-x.nws-layout-adjustX-fit {
   justify-content: stretch;
@@ -573,14 +763,14 @@
   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-childSizeY > * {
+  height: var(--nws-layout-childSizeY);
+}
 .nws-layout-center.nws-layout-direction-x.nws-layout-adjustY-fit {
   align-items: stretch;
 }
@@ -602,17 +792,37 @@
   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;
   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 +835,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);
@@ -634,15 +844,15 @@
   margin-left: auto;
   margin-right: auto;
 }
-.nws-layout-center.nws-layout-direction-y.nws-layout-childSizeY > * {
-  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-childSizeY > * {
+  height: var(--nws-layout-childSizeY);
+  flex-basis: var(--nws-layout-childSizeY);
+}
 .nws-layout-center.nws-layout-direction-y.nws-layout-adjustY-fit {
   justify-content: stretch;
 }
@@ -671,14 +881,22 @@
   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 +907,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 +924,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 {
@@ -768,14 +995,12 @@
 .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);
-}
 .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 +1008,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 +1026,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,13 +1078,11 @@
 .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 > * {
@@ -879,13 +1090,11 @@
   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 > * {
@@ -900,6 +1109,7 @@
 .nws-layout-pin {
   --nws-layout-childSizeX: auto;
   --nws-layout-childSizeY: auto;
+  --nws-layout-childRatio: auto;
   display: block;
   position: relative;
 }