From 94448fa278ab352a741ff13f22d6104869571144 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Wed, 18 Oct 2023 19:25:02 +0200
Subject: feat(components): add a generic Grid component

* merge Columns, Gallery and CardsList into Grid component
* add more options to control the grid
---
 src/components/molecules/grid/grid.module.scss | 41 ++++++++++++++++++++++++++
 1 file changed, 41 insertions(+)
 create mode 100644 src/components/molecules/grid/grid.module.scss

(limited to 'src/components/molecules/grid/grid.module.scss')

diff --git a/src/components/molecules/grid/grid.module.scss b/src/components/molecules/grid/grid.module.scss
new file mode 100644
index 0000000..e253a89
--- /dev/null
+++ b/src/components/molecules/grid/grid.module.scss
@@ -0,0 +1,41 @@
+.wrapper {
+  display: grid;
+  gap: var(--gap);
+
+  &--is-centered {
+    place-content: center;
+  }
+
+  &--has-fixed-size {
+    grid-template-columns: repeat(
+      var(--col, auto-fit),
+      min(100vw - (var(--spacing-md) * 2), var(--size))
+    );
+  }
+
+  &--has-min-size {
+    grid-template-columns: repeat(
+      var(--col, auto-fit),
+      minmax(
+        min(100vw - (var(--spacing-md) * 2), var(--size-min)),
+        var(--size-max, 1fr)
+      )
+    );
+  }
+
+  &:not(#{&}--has-fixed-size):not(#{&}--has-min-size) {
+    grid-template-columns: repeat(
+      var(--col, auto-fit),
+      minmax(0, var(--size-max, 1fr))
+    );
+  }
+}
+
+.item {
+  display: flex;
+  flex-flow: row wrap;
+
+  > * {
+    flex: 1;
+  }
+}
-- 
cgit v1.2.3