Use column-count to create pseudo masonry layout

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;
 }

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 {
+@media (min-width: 40rem) {
-  --gap: var(--space-8);
+  .masonry {
-  grid-template-columns: repeat(auto-fit, minmax(var(--min, 20rem), 1fr));
+    column-count: 2;
-  grid-auto-rows: 12rem;
+  }
-  grid-auto-flow: dense;
+}
+@media (min-width: 65rem) {
+  .masonry {
+    column-count: 3;
+  }
+}
+@media (min-width: 90rem) {
+  .masonry {
+    column-count: 4;
+  }
 }
 </style>