سعی کردم نمایش دسته بندی آرشیو محتوایی رو بهتر کنم ...

یک سری خطا رو متوجه نشدم چیکار میکنه کامنت کردم

src/components/Widgets/ContentCategory/ContentCategoryList/ContentCategoryItem.vue

@@ -1,24 +1,27 @@
 <template>
-  <q-card class="ContentCategoryItem"
-          :class="listType"
-          flat>
-    <div class="thumbnail"
-         @click="goToCategoryPageShow">
-      <q-img :src="contentCategory.thumbnail" />
-    </div>
-    <div class="cation">
-      <q-btn color="primary"
-             :to="{name: showCategoryRouteName, params: {category_id: contentCategory.id}}">
-        مشاهده جزییات
-      </q-btn>
-    </div>
-    <div class="title ellipsis-2-lines">
-      {{ contentCategory.title }}
-    </div>
-    <div class="description ellipsis-3-lines">
-      {{ contentCategory.description }}
-    </div>
-  </q-card>
+  <div class="col-md-4 col-sm-6 col-12">
+    <q-card class="ContentCategoryItem"
+            :class="listType"
+            flat>
+      <div class="thumbnail"
+           @click="goToCategoryPageShow">
+        <q-img :src="contentCategory.thumbnail" />
+      </div>
+      <div class="cation">
+        <q-btn color="primary"
+               :to="{name: showCategoryRouteName, params: {category_id: contentCategory.id}}">
+          مشاهده جزییات
+        </q-btn>
+      </div>
+      <div class="title ellipsis-2-lines">
+        {{ contentCategory.title }}
+      </div>
+      <div class="description ellipsis-3-lines">
+        {{ contentCategory.description }}
+      </div>
+    </q-card>
+  </div>
+
 </template>
 
 <script>
@@ -54,6 +57,8 @@ export default {
   flex-flow: column;
   position: relative;
   cursor: pointer;
+  //padding: 20px 20px 30px;
+  margin: 8px;
   .thumbnail {
     .q-img {
       width: 100%;

src/components/Widgets/ContentCategory/ContentCategoryList/ContentCategoryList.vue

@@ -218,28 +218,28 @@ export default {
     margin-bottom: 39px;
     margin-top: 50px;
   }
-  :deep(.entity-index) {
-    margin-top: 24px;
-    .quasar-crud-index-table {
-      .q-table__top {
-        display: none;
-      }
-      .q-table__grid-content {
-        $gap: 24px;
-        flex-wrap: wrap;
-        gap: $gap;
-        .ContentCategoryItem {
-          flex: 0 0 calc( 33.33% - #{$gap} );
-          box-sizing: border-box;
-        }
-      }
-      .q-table__bottom {
-        .q-table__control {
-          display: none;
-        }
-      }
-    }
-  }
+  //:deep(.entity-index) {
+  //  margin-top: 24px;
+  //  .quasar-crud-index-table {
+  //    .q-table__top {
+  //      display: none;
+  //    }
+  //    .q-table__grid-content {
+  //      $gap: 24px;
+  //      flex-wrap: wrap;
+  //      gap: $gap;
+  //      .ContentCategoryItem {
+  //        flex: 0 0 calc( 33.33% - #{$gap} );
+  //        box-sizing: border-box;
+  //      }
+  //    }
+  //    .q-table__bottom {
+  //      .q-table__control {
+  //        display: none;
+  //      }
+  //    }
+  //  }
+  //}
   .more-action {
     display: flex;
     flex-flow: row;