Use Columns and Rows instead of scrolling

js/src/components/Local/CloseContent.vue

@@ -29,21 +29,11 @@
     </div>
     <div class="overflow-hidden">
       <div
-        class="relative w-full snap-x snap-always snap-mandatory overflow-x-auto flex pb-6 gap-x-5 gap-y-8 p-1"
-        ref="scrollContainer"
-        @scroll="scrollHandler"
+        class="multi-card-event"
       >
         <slot name="content" />
       </div>
     </div>
-    <div class="hidden sm:block" v-show="showScrollRightButton">
-      <button
-        @click="scrollRight"
-        class="absolute inset-y-0 my-auto z-10 rounded-full bg-white dark:bg-transparent w-10 h-10 border border-shadowColor -right-5"
-      >
-        <span class="">&gt;</span>
-      </button>
-    </div>
   </div>
 </template>
 
@@ -112,3 +102,19 @@ onUnmounted(() => {
   }
 });
 </script>
+
+<style lang="scss" scoped>
+.multi-card-event {
+  display: grid;
+  grid-auto-rows: 1fr;
+  grid-column-gap: 20px;
+  grid-row-gap: 30px;
+  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  .event-card {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+}
+</style>
+