From 841554eb03d652ed3c70a6d46e8b5f57300ee707 Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Thu, 4 Jun 2026 12:07:39 +0200
Subject: Card list: Add flex layouts

---
 src/layouts/_card-list.scss      | 26 +++++++++++++++++++++++++-
 src/layouts/_card-list.vars.scss |  6 ++++++
 2 files changed, 31 insertions(+), 1 deletion(-)

(limited to 'src/layouts')

diff --git a/src/layouts/_card-list.scss b/src/layouts/_card-list.scss
index 8f96ce0..8f03c09 100644
--- a/src/layouts/_card-list.scss
+++ b/src/layouts/_card-list.scss
@@ -133,7 +133,6 @@
 			row-gap: props.get(vars.$quiet--row-gap);
 		}
 
-
 		@each $mod, $row-gap, $col-gap, $col-width, $quiet--row-gap, $breakpoint in vars.$grid-layouts {
 			@include bem.modifier($mod) {
 				display:               grid;
@@ -150,6 +149,31 @@
 			}
 		}
 
+		@each $mod, $row-gap, $col-gap, $col-width, $quiet--row-gap, $breakpoint in vars.$flex-layouts {
+			@include bem.modifier($mod) {
+				display:   flex;
+				flex-flow: row wrap;
+				gap:       props.get($row-gap) props.get($col-gap);
+
+				@include bem.modifier('quiet') {
+					row-gap: props.get($quiet--row-gap);
+				}
+
+				@include bem.elem('card') {
+					flex:        0.1 0 auto;
+					inline-size: props.get($col-width);
+				}
+
+				@include media.media('<=#{$breakpoint}') {
+					flex-flow: column nowrap;
+
+					@include bem.elem('card') {
+						inline-size: auto;
+					}
+				}
+			}
+		}
+
 		@include bem.modifier('masonry') {
 			display:    block;
 			columns:    auto props.get(vars.$masonry--col-width);
diff --git a/src/layouts/_card-list.vars.scss b/src/layouts/_card-list.vars.scss
index d860ec9..ae57744 100644
--- a/src/layouts/_card-list.vars.scss
+++ b/src/layouts/_card-list.vars.scss
@@ -26,6 +26,12 @@ $grid-layouts: (
 	'grid-xs' $grid-xs--row-gap $grid-xs--col-gap $grid-xs--col-width $grid-xs--quiet--row-gap xs,
 ) !default;
 
+$flex-layouts: (
+	'flex'    $grid--row-gap    $grid--col-gap    $grid--col-width    $grid--quiet--row-gap    sm,
+	'flex-sm' $grid-sm--row-gap $grid-sm--col-gap $grid-sm--col-width $grid-sm--quiet--row-gap sm,
+	'flex-xs' $grid-xs--row-gap $grid-xs--col-gap $grid-xs--col-width $grid-xs--quiet--row-gap xs,
+) !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;
-- 
cgit v1.3.1