From 03905dbd8337ee1768d91ac6875c3caee627dc60 Mon Sep 17 00:00:00 2001
From: timotheegoguely <timothee@goguely.com>
Date: Wed, 11 Sep 2024 11:22:14 +0200
Subject: [PATCH] Use column-count to create pseudo masonry layout

---
 src/components/inspirations/Image.vue |  2 --
 src/views/Inspirations.vue            | 24 +++++++++++++++++-------
 2 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/src/components/inspirations/Image.vue b/src/components/inspirations/Image.vue
index f87d59d..046c5e1 100644
--- a/src/components/inspirations/Image.vue
+++ b/src/components/inspirations/Image.vue
@@ -2,7 +2,6 @@
   <figure
     v-if="currentTab === 'all' || isFavorite"
     class="flex"
-    :style="'--rows: ' + (index % 2 ? 2 : 3)"
   >
     <button
       class="favorite"
@@ -63,7 +62,6 @@ figure {
   grid-row: span var(--rows);
   width: 100%;
   height: 100%;
-  margin: 0;
   border-radius: var(--rounded-2xl);
   overflow: hidden;
 }
diff --git a/src/views/Inspirations.vue b/src/views/Inspirations.vue
index 380497b..97a333f 100644
--- a/src/views/Inspirations.vue
+++ b/src/views/Inspirations.vue
@@ -6,9 +6,9 @@
       <h2 id="tabslist" class="sr-only">Inspirations</h2>
       <Tabs :tabs="tabs" @update:currentTab="changeTab" />
       <Selector />
-      <section :id="currentTab" class="inspiration">
+      <section :id="currentTab" class="inspiration" aria-labelledby="inspiration-title">
         <Header :inspiration="currentInspiration" />
-        <div class="grid masonry">
+        <div class="masonry flow">
           <template
             v-for="(item, index) in currentInspiration.media"
             :key="item.id"
@@ -69,6 +69,7 @@ const favoriteImages = computed(() => {
 function changeTab(newValue) {
   currentTab.value = newValue;
 }
+
 </script>
 
 <style scoped>
@@ -78,10 +79,19 @@ function changeTab(newValue) {
 }
 
 /* Masonry */
-.masonry {
-  --gap: var(--space-8);
-  grid-template-columns: repeat(auto-fit, minmax(var(--min, 20rem), 1fr));
-  grid-auto-rows: 12rem;
-  grid-auto-flow: dense;
+@media (min-width: 40rem) {
+  .masonry {
+    column-count: 2;
+  }
+}
+@media (min-width: 65rem) {
+  .masonry {
+    column-count: 3;
+  }
+}
+@media (min-width: 90rem) {
+  .masonry {
+    column-count: 4;
+  }
 }
 </style>