chore: add a PageLayout component

2 files changed, 26 insertions, 0 deletions

diff --git a/src/styles/abstracts/_placeholders.scss b/src/styles/abstracts/_placeholders.scss
index d1c0a7a..18b1c03 100644
--- a/src/styles/abstracts/_placeholders.scss
+++ b/src/styles/abstracts/_placeholders.scss
@@ -1,3 +1,4 @@
 @forward "./placeholders/animations";
 @forward "./placeholders/clearfix";
+@forward "./placeholders/layout";
 @forward "./placeholders/list";
diff --git a/src/styles/abstracts/placeholders/_layout.scss b/src/styles/abstracts/placeholders/_layout.scss
new file mode 100644
index 0000000..1a28acb
--- /dev/null
+++ b/src/styles/abstracts/placeholders/_layout.scss
@@ -0,0 +1,25 @@
+@use "@styles/abstracts/mixins" as mix;
+
+%grid {
+  display: grid;
+  align-items: center;
+  grid-template-columns:
+    minmax(0, 1fr) min(calc(100vw - calc(var(--spacing-md) * 2)), 80ch)
+    var(--column-3, minmax(0, 1fr));
+  column-gap: var(--grid-gap, var(--spacing-md));
+
+  @include mix.media("screen") {
+    @include mix.dimensions("md") {
+      grid-template-columns:
+        minmax(0, 1fr) clamp(60ch, 60vw, 80ch)
+        var(--column-3, minmax(0, 3fr));
+      column-gap: var(--grid-gap, var(--spacing-xl));
+    }
+
+    @include mix.dimensions("lg") {
+      grid-template-columns:
+        minmax(0, 1fr) clamp(47ch, 47vw, 80ch)
+        var(--column-3, minmax(0, 1fr));
+    }
+  }
+}