Updated

frontend/components/articles/ArticlesList.vue

@@ -1,9 +1,5 @@
 <script lang="ts" setup>
 
-// import
-
-import Masonry from "masonry-layout";
-
 // type
 
 type Props = {
@@ -15,29 +11,13 @@ type Props = {
 const props = defineProps<Props>();
 const { articles } = toRefs(props);
 
-// state
-
-onMounted(() => {
-    new Masonry(".masonry-articles-container", {
-        itemSelector: ".grid-item",
-        columnWidth: ".grid-sizer",
-        percentPosition: true,
-        gutter: ".gutter-sizer"
-    });
-});
-
 </script>
 
 <template>
-    <div class="masonry-articles-container w-full">
-
-        <div class="grid-sizer"></div>
-        <div class="gutter-sizer"></div>
-
+    <div class="columns-2 gap-8 w-full space-y-8">
         <BlogPost
             v-for="article in articles"
             :key="article.id"
-            class="grid-item"
             :image="article.cover_image"
             :description="article.summery"
             :title="article.title"
@@ -46,18 +26,5 @@ onMounted(() => {
             :date="article.created_at"
             tag="تگ ندارد"
         />
-
     </div>
-</template>
-
-<style>
-.grid-sizer,
-.grid-item {
-    margin-bottom: 24px;
-    width: 48%;
-}
-
-.gutter-sizer {
-    width: 4%;
-}
-</style>
+</template>