@niche-works/style-layouts 0.2.0 → 0.3.0

package/core/matrix/styles.css

@@ -1,20 +1,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;
@@ -52,6 +52,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);
 }

package/core/pack/pack.cjs

@@ -16,7 +16,7 @@ clsx = require_runtime.__toESM(clsx, 1);
 const pack = (options = {}) => {
 	const { direction, gap, gapX, gapY } = (0, _niche_works_utils_object_maybeDefault.default)(options, { direction: "x" }, { overwriteNull: true });
 	const result = {
-		className: (0, clsx.default)(require_core_constants.clsLayoutPack, require_core__constants.clsLayoutDirection[direction]),
+		className: (0, clsx.default)(require_core_constants.clsLayoutPack, require_core__constants.clsLayout.direction[direction]),
 		style: {}
 	};
 	require_core__internal_applyGap(result, gap, gapX, gapY);

package/core/pack/pack.mjs

@@ -1,5 +1,5 @@
 import { clsLayoutPack } from "../constants.mjs";
-import { clsLayoutDirection } from "../_constants.mjs";
+import { clsLayout } from "../_constants.mjs";
 import applyGap from "../_internal/applyGap.mjs";
 import maybeDefault from "@niche-works/utils/object/maybeDefault";
 import clsx from "clsx";
@@ -13,7 +13,7 @@ import clsx from "clsx";
 const pack = (options = {}) => {
 	const { direction, gap, gapX, gapY } = maybeDefault(options, { direction: "x" }, { overwriteNull: true });
 	const result = {
-		className: clsx(clsLayoutPack, clsLayoutDirection[direction]),
+		className: clsx(clsLayoutPack, clsLayout.direction[direction]),
 		style: {}
 	};
 	applyGap(result, gap, gapX, gapY);

package/core/pack/styles.css

@@ -6,13 +6,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%;
@@ -21,16 +23,23 @@
   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);
 }

package/core/pin/styles.css

@@ -1,6 +1,7 @@
 .nws-layout-pin {
   --nws-layout-childSizeX: auto;
   --nws-layout-childSizeY: auto;
+  --nws-layout-childRatio: auto;
   display: block;
   position: relative;
 }

package/core/stack/stack.cjs

@@ -24,7 +24,7 @@ const stack = (options = {}) => {
 		alignY: "top"
 	}, { overwriteNull: true });
 	const result = {
-		className: (0, clsx.default)(require_core_constants.clsLayoutStack, require_core__constants.clsLayoutDirection[direction], require_core__constants.clsLayoutAlign.x[alignX], require_core__constants.clsLayoutAlign.y[alignY]),
+		className: (0, clsx.default)(require_core_constants.clsLayoutStack, require_core__constants.clsLayout.direction[direction], require_core__constants.clsLayout.align.x[alignX], require_core__constants.clsLayout.align.y[alignY]),
 		style: {}
 	};
 	require_core__internal_applyGap(result, gap, gapX, gapY);
@@ -48,10 +48,10 @@ const stack = (options = {}) => {
 * @returns スタイル
 */
 function _getStackMainAxisStyle(axis, align, adjust, childSize) {
-	const result = { className: (0, clsx.default)(require_core__constants.clsLayoutAlign[axis][align], require_core__constants.clsLayoutAdjust[axis][adjust]) };
+	const result = { className: (0, clsx.default)(require_core__constants.clsLayout.align[axis][align], require_core__constants.clsLayout.adjust[axis][adjust]) };
 	if (require_core__internal_hasValue(childSize)) {
-		result.className = (0, clsx.default)(result.className, require_core__constants.clsLayoutChildSize[axis]);
-		result.style = { [require_core__constants.varLayoutChildSize[axis]]: require_core__internal_unit(childSize) };
+		result.className = (0, clsx.default)(result.className, require_core__constants.clsLayout.childSize[axis]);
+		result.style = { [require_core__constants.varLayout.childSize[axis]]: require_core__internal_unit(childSize) };
 	}
 	return result;
 }
@@ -65,34 +65,34 @@ function _getStackMainAxisStyle(axis, align, adjust, childSize) {
 */
 function _getStackClossAxisStyle(axis, align, adjust, childSize) {
 	if (adjust === "fit") return {
-		className: (0, clsx.default)(require_core__constants.clsLayoutAlign[axis][align], require_core__constants.clsLayoutAdjust[axis][adjust]),
-		style: {
-			[`min-${require_core__constants.cssLayoutAxisSizeProp[axis]}`]: "100%",
-			[require_core__constants.varLayoutChildSize[axis]]: `min(0, 100%)`
-		}
+		className: (0, clsx.default)(require_core__constants.clsLayout.align[axis][align], require_core__constants.clsLayout.adjust[axis][adjust]),
+		style: { [require_core__constants.varLayout.childSize[axis]]: `min(0, 100%)` }
 	};
 	else if (adjust === "grow") {
 		const result = {
-			className: (0, clsx.default)(require_core__constants.clsLayoutAlign[axis][align], require_core__constants.clsLayoutAdjust[axis][adjust]),
-			style: { [`min-${require_core__constants.cssLayoutAxisSizeProp[axis]}`]: "100%" }
+			className: (0, clsx.default)(require_core__constants.clsLayout.align[axis][align], require_core__constants.clsLayout.adjust[axis][adjust]),
+			style: {}
 		};
 		if (require_core__internal_hasValue(childSize)) {
-			result.className = (0, clsx.default)(result.className, require_core__constants.clsLayoutChildSize[axis]);
-			result.style[require_core__constants.varLayoutChildSize[axis]] = require_core__internal_unit(childSize);
+			result.className = (0, clsx.default)(result.className, require_core__constants.clsLayout.childSize[axis]);
+			result.style[require_core__constants.varLayout.childSize[axis]] = require_core__internal_unit(childSize);
 		}
 		return result;
 	} else if (adjust === "shrink") {
-		const result = { className: (0, clsx.default)(require_core__constants.clsLayoutAlign[axis][align], require_core__constants.clsLayoutAdjust[axis][adjust]) };
+		const result = {
+			className: (0, clsx.default)(require_core__constants.clsLayout.align[axis][align], require_core__constants.clsLayout.adjust[axis][adjust]),
+			style: {}
+		};
 		if (require_core__internal_hasValue(childSize)) {
-			result.className = (0, clsx.default)(result.className, require_core__constants.clsLayoutChildSize[axis]);
-			result.style = { [require_core__constants.varLayoutChildSize[axis]]: `min(${require_core__internal_unit(childSize)}, 100%)` };
+			result.className = (0, clsx.default)(result.className, require_core__constants.clsLayout.childSize[axis]);
+			result.style = { [require_core__constants.varLayout.childSize[axis]]: `min(${require_core__internal_unit(childSize)}, 100%)` };
 		}
 		return result;
 	} else if (require_core__internal_hasValue(childSize)) return {
-		className: (0, clsx.default)(require_core__constants.clsLayoutAlign[axis][align], require_core__constants.clsLayoutChildSize[axis]),
-		style: { [require_core__constants.varLayoutChildSize[axis]]: require_core__internal_unit(childSize) }
+		className: (0, clsx.default)(require_core__constants.clsLayout.align[axis][align], require_core__constants.clsLayout.childSize[axis]),
+		style: { [require_core__constants.varLayout.childSize[axis]]: require_core__internal_unit(childSize) }
 	};
-	else return { className: (0, clsx.default)(require_core__constants.clsLayoutAlign[axis][align]) };
+	else return { className: (0, clsx.default)(require_core__constants.clsLayout.align[axis][align]) };
 }
 
 //#endregion

package/core/stack/stack.mjs

@@ -1,5 +1,5 @@
 import { clsLayoutStack } from "../constants.mjs";
-import { clsLayoutAdjust, clsLayoutAlign, clsLayoutChildSize, clsLayoutDirection, cssLayoutAxisSizeProp, varLayoutChildSize } from "../_constants.mjs";
+import { clsLayout, varLayout } from "../_constants.mjs";
 import hasValue from "../_internal/hasValue.mjs";
 import applyChildRatio from "../_internal/applyChildRatio.mjs";
 import unit from "../_internal/unit.mjs";
@@ -21,7 +21,7 @@ const stack = (options = {}) => {
 		alignY: "top"
 	}, { overwriteNull: true });
 	const result = {
-		className: clsx(clsLayoutStack, clsLayoutDirection[direction], clsLayoutAlign.x[alignX], clsLayoutAlign.y[alignY]),
+		className: clsx(clsLayoutStack, clsLayout.direction[direction], clsLayout.align.x[alignX], clsLayout.align.y[alignY]),
 		style: {}
 	};
 	applyGap(result, gap, gapX, gapY);
@@ -45,10 +45,10 @@ const stack = (options = {}) => {
 * @returns スタイル
 */
 function _getStackMainAxisStyle(axis, align, adjust, childSize) {
-	const result = { className: clsx(clsLayoutAlign[axis][align], clsLayoutAdjust[axis][adjust]) };
+	const result = { className: clsx(clsLayout.align[axis][align], clsLayout.adjust[axis][adjust]) };
 	if (hasValue(childSize)) {
-		result.className = clsx(result.className, clsLayoutChildSize[axis]);
-		result.style = { [varLayoutChildSize[axis]]: unit(childSize) };
+		result.className = clsx(result.className, clsLayout.childSize[axis]);
+		result.style = { [varLayout.childSize[axis]]: unit(childSize) };
 	}
 	return result;
 }
@@ -62,34 +62,34 @@ function _getStackMainAxisStyle(axis, align, adjust, childSize) {
 */
 function _getStackClossAxisStyle(axis, align, adjust, childSize) {
 	if (adjust === "fit") return {
-		className: clsx(clsLayoutAlign[axis][align], clsLayoutAdjust[axis][adjust]),
-		style: {
-			[`min-${cssLayoutAxisSizeProp[axis]}`]: "100%",
-			[varLayoutChildSize[axis]]: `min(0, 100%)`
-		}
+		className: clsx(clsLayout.align[axis][align], clsLayout.adjust[axis][adjust]),
+		style: { [varLayout.childSize[axis]]: `min(0, 100%)` }
 	};
 	else if (adjust === "grow") {
 		const result = {
-			className: clsx(clsLayoutAlign[axis][align], clsLayoutAdjust[axis][adjust]),
-			style: { [`min-${cssLayoutAxisSizeProp[axis]}`]: "100%" }
+			className: clsx(clsLayout.align[axis][align], clsLayout.adjust[axis][adjust]),
+			style: {}
 		};
 		if (hasValue(childSize)) {
-			result.className = clsx(result.className, clsLayoutChildSize[axis]);
-			result.style[varLayoutChildSize[axis]] = unit(childSize);
+			result.className = clsx(result.className, clsLayout.childSize[axis]);
+			result.style[varLayout.childSize[axis]] = unit(childSize);
 		}
 		return result;
 	} else if (adjust === "shrink") {
-		const result = { className: clsx(clsLayoutAlign[axis][align], clsLayoutAdjust[axis][adjust]) };
+		const result = {
+			className: clsx(clsLayout.align[axis][align], clsLayout.adjust[axis][adjust]),
+			style: {}
+		};
 		if (hasValue(childSize)) {
-			result.className = clsx(result.className, clsLayoutChildSize[axis]);
-			result.style = { [varLayoutChildSize[axis]]: `min(${unit(childSize)}, 100%)` };
+			result.className = clsx(result.className, clsLayout.childSize[axis]);
+			result.style = { [varLayout.childSize[axis]]: `min(${unit(childSize)}, 100%)` };
 		}
 		return result;
 	} else if (hasValue(childSize)) return {
-		className: clsx(clsLayoutAlign[axis][align], clsLayoutChildSize[axis]),
-		style: { [varLayoutChildSize[axis]]: unit(childSize) }
+		className: clsx(clsLayout.align[axis][align], clsLayout.childSize[axis]),
+		style: { [varLayout.childSize[axis]]: unit(childSize) }
 	};
-	else return { className: clsx(clsLayoutAlign[axis][align]) };
+	else return { className: clsx(clsLayout.align[axis][align]) };
 }
 
 //#endregion

package/core/stack/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,8 +162,18 @@
   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);
 }