aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/molecules/grid/grid.module.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/molecules/grid/grid.module.scss')
-rw-r--r--src/components/molecules/grid/grid.module.scss41
1 files changed, 41 insertions, 0 deletions
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;
+ }
+}