Responsive sizing of cardgroup

directus · Aug 3, 2023 · e673c79 · e673c79
1 parent 765cc1a
commit e673c79
Showing 1 changed file with 27 additions and 4 deletions.
diff --git a/components/Block/CardGroup.vue b/components/Block/CardGroup.vue
@@ -15,15 +15,38 @@ const { data: block } = useAsyncData(props.uuid, () =>
 </script>
 
 <template>
-	<div v-if="block" :class="[`direction-${block.direction ?? 'horizontal'}`, 'block-cardgroup']">
-		<BlockCard v-for="{ block_card_id: card } in block.cards" :key="card" :uuid="card" />
+	<div class="block-cardgroup-container">
+		<div v-if="block" :class="[`direction-${block.direction ?? 'horizontal'}`, 'block-cardgroup']">
+			<BlockCard v-for="{ block_card_id: card } in block.cards" :key="card" :uuid="card" />
+		</div>
 	</div>
 </template>
 
 <style lang="scss" scoped>
+.block-cardgroup-container {
+	container-type: inline-size;
+}
+
 .block-cardgroup {
+	--columns: 1;
+	--gap: var(--space-5);
+
 	display: grid;
-	grid-template-columns: repeat(auto-fit, minmax(var(--space-40), 1fr));
-	gap: var(--space-8);
+	grid-template-columns: repeat(var(--columns), 1fr);
+	gap: var(--gap);
+
+	@container (width > 20rem) {
+		--columns: 2;
+	}
+
+	@container (width > 40rem) {
+		--columns: 3;
+		--gap: var(--space-6);
+	}
+
+	@container (width > 60rem) {
+		--columns: 4;
+		--gap: var(--space-8);
+	}
 }
 </style>