Configurable card list grid layouts

2 files changed, 21 insertions, 24 deletions

diff --git a/src/layouts/_card-list.scss b/src/layouts/_card-list.scss
index aedbfd0..6a6fe01 100644
--- a/src/layouts/_card-list.scss
+++ b/src/layouts/_card-list.scss
@@ -78,31 +78,17 @@
                         row-gap: props.get(vars.$quiet--row-gap);
                 }
 
-                @include bem.modifier('grid') {
-                        display:               grid;
-                        grid-template-columns: repeat(auto-fill, minmax(props.get(vars.$grid--col-width), 1fr));
-                        gap:                   props.get(vars.$grid--row-gap) props.get(vars.$grid--col-gap);
 
-                        @include bem.modifier('quiet') {
-                                row-gap: props.get(vars.$grid--quiet--row-gap);
-                        }
-                }
-
-                @include bem.modifier('grid-sm') {
-                        display:               grid;
-                        grid-template-columns: repeat(auto-fill, minmax(props.get(vars.$grid-sm--col-width), 1fr));
-                        gap:                   props.get(vars.$grid-sm--row-gap) props.get(vars.$grid-sm--col-gap);
+                @each $mod, $row-gap, $col-gap, $col-width, $quiet--row-gap in vars.$grid-layouts {
+                        @include bem.modifier($mod) {
+                                display:               grid;
+                                grid-template-columns: repeat(auto-fill, minmax(props.get($col-width), 1fr));
+                                gap:                   props.get($row-gap) props.get($col-gap);
 
-                        @include bem.modifier('grid-sm') {
-                                @include media.media('<=md') {
-                                        display: flex;
-                                        gap:     props.get(vars.$row-gap);
+                                @include bem.modifier('quiet') {
+                                        row-gap: props.get($quiet--row-gap);
                                 }
                         }
-
-                        @include bem.modifier('quiet') {
-                                row-gap: props.get(vars.$grid-sm--quiet--row-gap);
-                        }
                 }
 
                 @include bem.modifier('masonry') {
diff --git a/src/layouts/_card-list.vars.scss b/src/layouts/_card-list.vars.scss
index 75e72cc..2215882 100644
--- a/src/layouts/_card-list.vars.scss
+++ b/src/layouts/_card-list.vars.scss
@@ -14,11 +14,22 @@ $grid--col-gap:        props.def(--l-card-list--grid--col-gap, props.get(core.$s
 $grid--col-width:      props.def(--l-card-list--grid--col-width, props.get(core.$size--3200)) !default;
 $grid--quiet--row-gap: props.def(--l-card-list--grid--quiet--row-gap, props.get(core.$size--800)) !default;
 
-$grid-sm--row-gap:        props.def(--l-card-list--grid-md--row-gap, props.get(core.$size--200)) !default;
-$grid-sm--col-gap:        props.def(--l-card-list--grid-md--col-gap, props.get(core.$size--200)) !default;
-$grid-sm--col-width:      props.def(--l-card-list--grid-md--col-width, props.get(core.$size--4600)) !default;
+$grid-sm--row-gap:        props.def(--l-card-list--grid-sm--row-gap, props.get(core.$size--200)) !default;
+$grid-sm--col-gap:        props.def(--l-card-list--grid-sm--col-gap, props.get(core.$size--200)) !default;
+$grid-sm--col-width:      props.def(--l-card-list--grid-sm--col-width, props.get(core.$size--4600)) !default;
 $grid-sm--quiet--row-gap: props.def(--l-card-list--grid-sm--quiet--row-gap, props.get(core.$size--800)) !default;
 
+$grid-xs--row-gap:        props.def(--l-card-list--grid-xs--row-gap, props.get(core.$size--200)) !default;
+$grid-xs--col-gap:        props.def(--l-card-list--grid-xs--col-gap, props.get(core.$size--200)) !default;
+$grid-xs--col-width:      props.def(--l-card-list--grid-xs--col-width, props.get(core.$size--2400)) !default;
+$grid-xs--quiet--row-gap: props.def(--l-card-list--grid-xs--quiet--row-gap, props.get(core.$size--800)) !default;
+
+$grid-layouts: (
+        'grid':    $grid--row-gap    $grid--col-gap    $grid--col-width    $grid--quiet--row-gap,
+        'grid-sm': $grid-sm--row-gap $grid-sm--col-gap $grid-sm--col-width $grid-sm--quiet--row-gap,
+        'grid-xs': $grid-xs--row-gap $grid-xs--col-gap $grid-xs--col-width $grid-xs--quiet--row-gap,
+) !default;
+
 $masonry--row-gap:        props.def(--l-card-list--masonry--row-gap, props.get(core.$size--400)) !default;
 $masonry--col-gap:        props.def(--l-card-list--masonry--col-gap, props.get(core.$size--400)) !default;
 $masonry--col-width:      props.def(--l-card-list--masonry--col-width, props.get(core.$size--3200)) !default;