Use column-count to create pseudo masonry layout

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>