@fringeworks/react-layouts 0.8.0

package/css/center.css

@@ -0,0 +1,189 @@
+.lx-layout-center {
+  --lx-layout-gapX: 0px;
+  --lx-layout-gapY: 0px;
+  --lx-layout-itemSizeX: auto;
+  --lx-layout-itemSizeY: auto;
+  --lx-layout-itemRatio: auto;
+  display: flex;
+  justify-content: flex-start;
+  align-content: flex-start;
+  flex-wrap: nowrap;
+}
+
+.lx-layout-center > * {
+  min-width: 0;
+  max-width: 100%;
+  min-height: 0;
+  max-height: 100%;
+  margin: 0;
+}
+
+.lx-layout-center.lx-layout-direction-x {
+  flex-direction: row;
+}
+
+.lx-layout-center.lx-layout-direction-x > * {
+  max-width: none;
+  max-height: none;
+  flex-grow: 0;
+  flex-shrink: 0;
+  margin-top: auto;
+  margin-bottom: auto;
+}
+
+.lx-layout-center.lx-layout-direction-x > *:first-child {
+  margin-left: auto;
+}
+
+.lx-layout-center.lx-layout-direction-x > *:last-child {
+  margin-right: auto;
+}
+
+.lx-layout-center.lx-layout-direction-x.lx-layout-itemSizeX > * {
+  width: var(--lx-layout-itemSizeX);
+  flex-basis: var(--lx-layout-itemSizeX);
+}
+
+.lx-layout-center.lx-layout-direction-x.lx-layout-adjustX-fit > * {
+  width: 100%;
+  max-width: none;
+  flex-grow: 1;
+  flex-shrink: 1;
+  flex-basis: 0%;
+}
+
+.lx-layout-center.lx-layout-direction-x.lx-layout-adjustX-grow > * {
+  width: 100%;
+  min-width: var(--lx-layout-itemSizeX);
+  max-width: none;
+  flex-grow: 1;
+  flex-basis: var(--lx-layout-itemSizeX);
+}
+
+.lx-layout-center.lx-layout-direction-x.lx-layout-adjustX-shrink > * {
+  width: var(--lx-layout-itemSizeX);
+  max-width: 100%;
+  flex-shrink: 1;
+  flex-basis: var(--lx-layout-itemSizeX);
+}
+
+.lx-layout-center.lx-layout-direction-x.lx-layout-itemSizeY > * {
+  height: var(--lx-layout-itemSizeY);
+}
+
+.lx-layout-center.lx-layout-direction-x.lx-layout-adjustY-fit {
+  align-items: stretch;
+}
+
+.lx-layout-center.lx-layout-direction-x.lx-layout-adjustY-fit > * {
+  height: 100%;
+  max-height: none;
+}
+
+.lx-layout-center.lx-layout-direction-x.lx-layout-adjustY-grow {
+  align-items: stretch;
+}
+
+.lx-layout-center.lx-layout-direction-x.lx-layout-adjustY-grow > * {
+  height: 100%;
+  min-height: var(--lx-layout-itemSizeY);
+  max-height: none;
+}
+
+.lx-layout-center.lx-layout-direction-x.lx-layout-adjustY-shrink > * {
+  height: var(--lx-layout-itemSizeY);
+  max-height: 100%;
+  margin-top: auto;
+  margin-bottom: auto;
+}
+
+.lx-layout-center.lx-layout-direction-y {
+  flex-direction: column;
+}
+
+.lx-layout-center.lx-layout-direction-y > * {
+  max-width: none;
+  max-height: none;
+  flex-grow: 0;
+  flex-shrink: 0;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.lx-layout-center.lx-layout-direction-y > *:first-child {
+  margin-top: auto;
+}
+
+.lx-layout-center.lx-layout-direction-y > *:last-child {
+  margin-bottom: auto;
+}
+
+.lx-layout-center.lx-layout-direction-y.lx-layout-itemSizeX > * {
+  width: var(--lx-layout-itemSizeX);
+}
+
+.lx-layout-center.lx-layout-direction-y.lx-layout-adjustX-fit {
+  align-items: stretch;
+}
+
+.lx-layout-center.lx-layout-direction-y.lx-layout-adjustX-fit > * {
+  width: 100%;
+  max-width: none;
+}
+
+.lx-layout-center.lx-layout-direction-y.lx-layout-adjustX-grow {
+  align-items: stretch;
+}
+
+.lx-layout-center.lx-layout-direction-y.lx-layout-adjustX-grow > * {
+  width: 100%;
+  min-width: var(--lx-layout-itemSizeX);
+  max-width: none;
+}
+
+.lx-layout-center.lx-layout-direction-y.lx-layout-adjustX-shrink > * {
+  width: var(--lx-layout-itemSizeX);
+  max-width: 100%;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.lx-layout-center.lx-layout-direction-y.lx-layout-itemSizeY > * {
+  height: var(--lx-layout-itemSizeY);
+  flex-basis: var(--lx-layout-itemSizeY);
+}
+
+.lx-layout-center.lx-layout-direction-y.lx-layout-adjustY-fit > * {
+  height: 100%;
+  max-height: none;
+  flex-grow: 1;
+  flex-shrink: 1;
+  flex-basis: 0%;
+}
+
+.lx-layout-center.lx-layout-direction-y.lx-layout-adjustY-grow > * {
+  height: 100%;
+  min-height: var(--lx-layout-itemSizeY);
+  max-height: none;
+  flex-grow: 1;
+  flex-basis: var(--lx-layout-itemSizeY);
+}
+
+.lx-layout-center.lx-layout-direction-y.lx-layout-adjustY-shrink > * {
+  height: var(--lx-layout-itemSizeY);
+  max-height: 100%;
+  flex-shrink: 1;
+  flex-basis: var(--lx-layout-itemSizeY);
+}
+
+.lx-layout-center.lx-layout-itemRatio > * {
+  aspect-ratio: var(--lx-layout-itemRatio);
+}
+
+.lx-layout-center.lx-layout-gapX {
+  column-gap: var(--lx-layout-gapX);
+}
+
+.lx-layout-center.lx-layout-gapY {
+  row-gap: var(--lx-layout-gapY);
+}

package/css/flow.css

@@ -0,0 +1,205 @@
+.lx-layout-flow {
+  --lx-layout-gapX: 0px;
+  --lx-layout-gapY: 0px;
+  --lx-layout-itemSizeX: auto;
+  --lx-layout-itemSizeY: auto;
+  --lx-layout-itemRatio: auto;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.lx-layout-flow.lx-layout-direction-x {
+  flex-direction: row;
+}
+
+.lx-layout-flow.lx-layout-direction-x.lx-layout-alignX-left {
+  justify-content: flex-start;
+}
+
+.lx-layout-flow.lx-layout-direction-x.lx-layout-alignX-center {
+  justify-content: center;
+}
+
+.lx-layout-flow.lx-layout-direction-x.lx-layout-alignX-right {
+  justify-content: flex-end;
+}
+
+.lx-layout-flow.lx-layout-direction-x.lx-layout-alignX-spaceBetween {
+  justify-content: space-between;
+}
+
+.lx-layout-flow.lx-layout-direction-x.lx-layout-alignX-spaceAround {
+  justify-content: space-around;
+}
+
+.lx-layout-flow.lx-layout-direction-x.lx-layout-alignX-spaceEvenly {
+  justify-content: space-evenly;
+}
+
+.lx-layout-flow.lx-layout-direction-x.lx-layout-alignY-top {
+  align-items: flex-start;
+  align-content: flex-start;
+}
+
+.lx-layout-flow.lx-layout-direction-x.lx-layout-alignY-middle {
+  align-items: center;
+  align-content: center;
+}
+
+.lx-layout-flow.lx-layout-direction-x.lx-layout-alignY-bottom {
+  align-items: flex-end;
+  align-content: flex-end;
+}
+
+.lx-layout-flow.lx-layout-direction-x.lx-layout-alignY-spaceBetween {
+  align-content: space-between;
+}
+
+.lx-layout-flow.lx-layout-direction-x.lx-layout-alignY-spaceAround {
+  align-content: space-around;
+}
+
+.lx-layout-flow.lx-layout-direction-x.lx-layout-alignY-spaceEvenly {
+  align-content: space-evenly;
+}
+
+.lx-layout-flow.lx-layout-direction-x > * {
+  flex-grow: 0;
+  flex-shrink: 0;
+  min-width: 0;
+  min-height: 0;
+}
+
+.lx-layout-flow.lx-layout-direction-x.lx-layout-itemSizeX > * {
+  flex-basis: var(--lx-layout-itemSizeX);
+}
+
+.lx-layout-flow.lx-layout-direction-x.lx-layout-adjustX-fit {
+  justify-content: flex-start;
+}
+
+.lx-layout-flow.lx-layout-direction-x.lx-layout-adjustX-fit > * {
+  flex-grow: 1;
+  flex-shrink: 1;
+  flex-basis: auto;
+}
+
+.lx-layout-flow.lx-layout-direction-x.lx-layout-adjustX-fit.lx-layout-itemSizeX > * {
+  flex-basis: var(--lx-layout-itemSizeX);
+}
+
+.lx-layout-flow.lx-layout-direction-x.lx-layout-adjustX-grow > * {
+  flex-grow: 1;
+}
+
+.lx-layout-flow.lx-layout-direction-x.lx-layout-adjustX-shrink > * {
+  flex-shrink: 1;
+}
+
+.lx-layout-flow.lx-layout-direction-x.lx-layout-itemSizeY > * {
+  height: var(--lx-layout-itemSizeY);
+}
+
+.lx-layout-flow.lx-layout-direction-y {
+  flex-direction: column;
+}
+
+.lx-layout-flow.lx-layout-direction-y.lx-layout-alignX-left {
+  align-items: flex-start;
+  align-content: flex-start;
+}
+
+.lx-layout-flow.lx-layout-direction-y.lx-layout-alignX-center {
+  align-items: center;
+  align-content: center;
+}
+
+.lx-layout-flow.lx-layout-direction-y.lx-layout-alignX-right {
+  align-items: flex-end;
+  align-content: flex-end;
+}
+
+.lx-layout-flow.lx-layout-direction-y.lx-layout-alignX-spaceBetween {
+  align-content: space-between;
+}
+
+.lx-layout-flow.lx-layout-direction-y.lx-layout-alignX-spaceAround {
+  align-content: space-around;
+}
+
+.lx-layout-flow.lx-layout-direction-y.lx-layout-alignX-spaceEvenly {
+  align-content: space-evenly;
+}
+
+.lx-layout-flow.lx-layout-direction-y.lx-layout-alignY-top {
+  justify-content: flex-start;
+}
+
+.lx-layout-flow.lx-layout-direction-y.lx-layout-alignY-middle {
+  justify-content: center;
+}
+
+.lx-layout-flow.lx-layout-direction-y.lx-layout-alignY-bottom {
+  justify-content: flex-end;
+}
+
+.lx-layout-flow.lx-layout-direction-y.lx-layout-alignY-spaceBetween {
+  justify-content: space-between;
+}
+
+.lx-layout-flow.lx-layout-direction-y.lx-layout-alignY-spaceAround {
+  justify-content: space-around;
+}
+
+.lx-layout-flow.lx-layout-direction-y.lx-layout-alignY-spaceEvenly {
+  justify-content: space-evenly;
+}
+
+.lx-layout-flow.lx-layout-direction-y > * {
+  flex-grow: 0;
+  flex-shrink: 0;
+  min-width: 0;
+  min-height: 0;
+}
+
+.lx-layout-flow.lx-layout-direction-y.lx-layout-itemSizeX > * {
+  width: var(--lx-layout-itemSizeX);
+}
+
+.lx-layout-flow.lx-layout-direction-y.lx-layout-itemSizeY > * {
+  flex-basis: var(--lx-layout-itemSizeY);
+}
+
+.lx-layout-flow.lx-layout-direction-y.lx-layout-adjustY-fit {
+  justify-content: flex-start;
+}
+
+.lx-layout-flow.lx-layout-direction-y.lx-layout-adjustY-fit > * {
+  flex-grow: 1;
+  flex-shrink: 1;
+  flex-basis: auto;
+}
+
+.lx-layout-flow.lx-layout-direction-y.lx-layout-adjustY-fit.lx-layout-itemSizeY > * {
+  flex-basis: var(--lx-layout-itemSizeY);
+}
+
+.lx-layout-flow.lx-layout-direction-y.lx-layout-adjustY-grow > * {
+  flex-grow: 1;
+}
+
+.lx-layout-flow.lx-layout-direction-y.lx-layout-adjustY-shrink > * {
+  flex-shrink: 1;
+}
+
+.lx-layout-flow.lx-layout-itemRatio > * {
+  aspect-ratio: var(--lx-layout-itemRatio);
+}
+
+.lx-layout-flow.lx-layout-gapX {
+  column-gap: var(--lx-layout-gapX);
+}
+
+.lx-layout-flow.lx-layout-gapY {
+  row-gap: var(--lx-layout-gapY);
+}

package/css/layer.css

@@ -0,0 +1,72 @@
+.lx-layout-layer {
+  --lx-layout-itemSizeX: auto;
+  --lx-layout-itemSizeY: auto;
+  --lx-layout-itemRatio: auto;
+  display: grid;
+}
+
+.lx-layout-layer > * {
+  grid-area: 1/1;
+}
+
+.lx-layout-layer.lx-layout-alignX-left > * {
+  justify-self: start;
+}
+
+.lx-layout-layer.lx-layout-alignX-center > * {
+  justify-self: center;
+}
+
+.lx-layout-layer.lx-layout-alignX-right > * {
+  justify-self: end;
+}
+
+.lx-layout-layer.lx-layout-alignY-top > * {
+  align-self: start;
+}
+
+.lx-layout-layer.lx-layout-alignY-middle > * {
+  align-self: center;
+}
+
+.lx-layout-layer.lx-layout-alignY-bottom > * {
+  align-self: end;
+}
+
+.lx-layout-layer.lx-layout-itemSizeX > * {
+  width: var(--lx-layout-itemSizeX);
+}
+
+.lx-layout-layer.lx-layout-itemSizeY > * {
+  height: var(--lx-layout-itemSizeY);
+}
+
+.lx-layout-layer.lx-layout-adjustX-fit > *, .lx-layout-layer.lx-layout-adjustX-grow > * {
+  justify-self: stretch;
+  width: auto;
+}
+
+.lx-layout-layer.lx-layout-adjustX-grow > * {
+  min-width: var(--lx-layout-itemSizeX);
+}
+
+.lx-layout-layer.lx-layout-adjustX-shrink > * {
+  width: clamp(0px, 100%, var(--lx-layout-itemSizeX));
+}
+
+.lx-layout-layer.lx-layout-adjustY-fit > *, .lx-layout-layer.lx-layout-adjustY-grow > * {
+  align-self: stretch;
+  height: auto;
+}
+
+.lx-layout-layer.lx-layout-adjustY-grow > * {
+  min-height: var(--lx-layout-itemSizeY);
+}
+
+.lx-layout-layer.lx-layout-adjustY-shrink > * {
+  height: clamp(0px, 100%, var(--lx-layout-itemSizeY));
+}
+
+.lx-layout-layer.lx-layout-itemRatio > * {
+  aspect-ratio: var(--lx-layout-itemRatio);
+}

package/css/matrix.css

@@ -0,0 +1,184 @@
+.lx-layout-matrix {
+  --lx-layout-gapX: 0px;
+  --lx-layout-gapY: 0px;
+  --lx-layout-itemSizeX: auto;
+  --lx-layout-itemSizeY: auto;
+  --lx-layout-itemRatio: auto;
+  --lx-layout-itemCountX: auto-fit;
+  --lx-layout-itemCountY: auto-fit;
+  --lx-layout-templateX: none;
+  --lx-layout-templateY: none;
+  display: grid;
+}
+
+.lx-layout-matrix.lx-layout-direction-x {
+  grid-auto-flow: row;
+}
+
+.lx-layout-matrix.lx-layout-direction-y {
+  grid-auto-flow: column;
+}
+
+.lx-layout-matrix.lx-layout-alignX-left {
+  justify-content: flex-start;
+}
+
+.lx-layout-matrix.lx-layout-alignX-center {
+  justify-content: center;
+}
+
+.lx-layout-matrix.lx-layout-alignX-right {
+  justify-content: flex-end;
+}
+
+.lx-layout-matrix.lx-layout-alignX-spaceBetween {
+  justify-content: space-between;
+}
+
+.lx-layout-matrix.lx-layout-alignX-spaceAround {
+  justify-content: space-around;
+}
+
+.lx-layout-matrix.lx-layout-alignX-spaceEvenly {
+  justify-content: space-evenly;
+}
+
+.lx-layout-matrix.lx-layout-alignY-top {
+  align-content: flex-start;
+}
+
+.lx-layout-matrix.lx-layout-alignY-middle {
+  align-content: center;
+}
+
+.lx-layout-matrix.lx-layout-alignY-bottom {
+  align-content: flex-end;
+}
+
+.lx-layout-matrix.lx-layout-alignY-spaceBetween {
+  align-content: space-between;
+}
+
+.lx-layout-matrix.lx-layout-alignY-spaceAround {
+  align-content: space-around;
+}
+
+.lx-layout-matrix.lx-layout-alignY-spaceEvenly {
+  align-content: space-evenly;
+}
+
+.lx-layout-matrix.lx-layout-itemSizeX {
+  grid-template-columns: repeat(auto-fit, var(--lx-layout-itemSizeX));
+}
+
+.lx-layout-matrix.lx-layout-itemSizeX.lx-layout-itemCountX {
+  grid-template-columns: repeat(var(--lx-layout-itemCountX), var(--lx-layout-itemSizeX));
+}
+
+.lx-layout-matrix.lx-layout-itemCountX {
+  grid-template-columns: repeat(var(--lx-layout-itemCountX), auto);
+}
+
+.lx-layout-matrix.lx-layout-templateX {
+  grid-template-columns: var(--lx-layout-templateX);
+}
+
+.lx-layout-matrix.lx-layout-adjustX-fit.lx-layout-itemSizeX {
+  grid-template-columns: repeat(auto-fit, minmax(clamp(0px, 100%, var(--lx-layout-itemSizeX)), 1fr));
+}
+
+.lx-layout-matrix.lx-layout-adjustX-fit.lx-layout-itemSizeX.lx-layout-itemCountX {
+  grid-template-columns: repeat(var(--lx-layout-itemCountX), minmax(clamp(0px, (100% - var(--lx-layout-gapX) * (var(--lx-layout-itemCountX) - 1)) / var(--lx-layout-itemCountX), var(--lx-layout-itemSizeX)), 1fr));
+}
+
+.lx-layout-matrix.lx-layout-adjustX-fit.lx-layout-itemCountX {
+  grid-template-columns: repeat(var(--lx-layout-itemCountX), 1fr);
+}
+
+.lx-layout-matrix.lx-layout-adjustX-grow.lx-layout-itemSizeX {
+  grid-template-columns: repeat(auto-fit, minmax(var(--lx-layout-itemSizeX), 1fr));
+}
+
+.lx-layout-matrix.lx-layout-adjustX-grow.lx-layout-itemSizeX.lx-layout-itemCountX {
+  grid-template-columns: repeat(var(--lx-layout-itemCountX), minmax(var(--lx-layout-itemSizeX), 1fr));
+}
+
+.lx-layout-matrix.lx-layout-adjustX-grow.lx-layout-itemCountX {
+  grid-template-columns: repeat(var(--lx-layout-itemCountX), 1fr);
+}
+
+.lx-layout-matrix.lx-layout-adjustX-shrink.lx-layout-itemSizeX {
+  grid-template-columns: repeat(auto-fit, minmax(0, var(--lx-layout-itemSizeX)));
+}
+
+.lx-layout-matrix.lx-layout-adjustX-shrink.lx-layout-itemSizeX.lx-layout-itemCountX {
+  grid-template-columns: repeat(var(--lx-layout-itemCountX), minmax(0, var(--lx-layout-itemSizeX)));
+}
+
+.lx-layout-matrix.lx-layout-adjustX-shrink.lx-layout-itemCountX {
+  grid-template-columns: repeat(var(--lx-layout-itemCountX), auto);
+}
+
+.lx-layout-matrix.lx-layout-itemSizeY {
+  grid-template-rows: repeat(auto-fit, var(--lx-layout-itemSizeY));
+}
+
+.lx-layout-matrix.lx-layout-itemSizeY.lx-layout-itemCountY {
+  grid-template-rows: repeat(var(--lx-layout-itemCountY), var(--lx-layout-itemSizeY));
+}
+
+.lx-layout-matrix.lx-layout-itemCountY {
+  grid-template-rows: repeat(var(--lx-layout-itemCountY), auto);
+}
+
+.lx-layout-matrix.lx-layout-templateY {
+  grid-template-rows: var(--lx-layout-templateY);
+}
+
+.lx-layout-matrix.lx-layout-adjustY-fit.lx-layout-itemSizeY {
+  grid-template-rows: repeat(auto-fit, minmax(clamp(0px, 100%, var(--lx-layout-itemSizeY)), 1fr));
+}
+
+.lx-layout-matrix.lx-layout-adjustY-fit.lx-layout-itemSizeY.lx-layout-itemCountY {
+  grid-template-rows: repeat(var(--lx-layout-itemCountY), minmax(clamp(0px, (100% - var(--lx-layout-gapY) * (var(--lx-layout-itemCountY) - 1)) / var(--lx-layout-itemCountY), var(--lx-layout-itemSizeY)), 1fr));
+}
+
+.lx-layout-matrix.lx-layout-adjustY-fit.lx-layout-itemCountY {
+  grid-template-rows: repeat(var(--lx-layout-itemCountY), 1fr);
+}
+
+.lx-layout-matrix.lx-layout-adjustY-grow.lx-layout-itemSizeY {
+  grid-template-rows: repeat(auto-fit, minmax(var(--lx-layout-itemSizeY), 1fr));
+}
+
+.lx-layout-matrix.lx-layout-adjustY-grow.lx-layout-itemSizeY.lx-layout-itemCountY {
+  grid-template-rows: repeat(var(--lx-layout-itemCountY), minmax(var(--lx-layout-itemSizeY), 1fr));
+}
+
+.lx-layout-matrix.lx-layout-adjustY-grow.lx-layout-itemCountY {
+  grid-template-rows: repeat(var(--lx-layout-itemCountY), 1fr);
+}
+
+.lx-layout-matrix.lx-layout-adjustY-shrink.lx-layout-itemSizeY {
+  grid-template-rows: repeat(auto-fit, minmax(0, var(--lx-layout-itemSizeY)));
+}
+
+.lx-layout-matrix.lx-layout-adjustY-shrink.lx-layout-itemSizeY.lx-layout-itemCountY {
+  grid-template-rows: repeat(var(--lx-layout-itemCountY), minmax(0, var(--lx-layout-itemSizeY)));
+}
+
+.lx-layout-matrix.lx-layout-adjustY-shrink.lx-layout-itemCountY {
+  grid-template-rows: repeat(var(--lx-layout-itemCountY), auto);
+}
+
+.lx-layout-matrix.lx-layout-itemRatio > * {
+  aspect-ratio: var(--lx-layout-itemRatio);
+}
+
+.lx-layout-matrix.lx-layout-gapX {
+  column-gap: var(--lx-layout-gapX);
+}
+
+.lx-layout-matrix.lx-layout-gapY {
+  row-gap: var(--lx-layout-gapY);
+}

package/css/pack.css

@@ -0,0 +1,42 @@
+.lx-layout-pack {
+  --lx-layout-gapX: 0px;
+  --lx-layout-gapY: 0px;
+  --lx-layout-itemRatio: auto;
+  display: flex;
+  justify-content: flex-start;
+  align-items: stretch;
+}
+
+.lx-layout-pack > * {
+  flex-basis: 0;
+  flex-grow: 1;
+  flex-shrink: 1;
+}
+
+.lx-layout-pack.lx-layout-direction-x {
+  flex-direction: row;
+}
+
+.lx-layout-pack.lx-layout-direction-x > * {
+  min-width: 0;
+  min-height: 100%;
+  max-height: 100%;
+}
+
+.lx-layout-pack.lx-layout-direction-y {
+  flex-direction: column;
+}
+
+.lx-layout-pack.lx-layout-direction-y > * {
+  min-height: 0;
+  min-width: 100%;
+  max-width: 100%;
+}
+
+.lx-layout-pack.lx-layout-gapX {
+  column-gap: var(--lx-layout-gapX);
+}
+
+.lx-layout-pack.lx-layout-gapY {
+  row-gap: var(--lx-layout-gapY);
+}

package/css/pin.css

@@ -0,0 +1,23 @@
+.lx-layout-pin {
+  --lx-layout-itemSizeX: auto;
+  --lx-layout-itemSizeY: auto;
+  --lx-layout-itemRatio: auto;
+  display: block;
+  position: relative;
+}
+
+.lx-layout-pin > * {
+  position: absolute;
+}
+
+.lx-layout-pin.lx-layout-itemSizeX > * {
+  width: var(--lx-layout-itemSizeX);
+}
+
+.lx-layout-pin.lx-layout-itemSizeY > * {
+  height: var(--lx-layout-itemSizeY);
+}
+
+.lx-layout-pin.lx-layout-itemRatio > * {
+  aspect-ratio: var(--lx-layout-itemRatio);
+}