LIL-582

web/src/components/ContestWorks.vue

@@ -1,7 +1,15 @@
 <template>
   <div class="contest-works">
     <div class="contest-works__works">
-      <contest-work v-for="contestWork in contestWorks" :key="contestWork.id" :contest-work="contestWork"></contest-work>
+      <div class="contest-works__column">
+        <contest-work v-for="contestWork in columns[0]" :key="contestWork.id" :contest-work="contestWork"></contest-work>
+      </div>
+      <div class="contest-works__column">
+        <contest-work v-for="contestWork in columns[1]" :key="contestWork.id" :contest-work="contestWork"></contest-work>
+      </div>
+      <div class="contest-works__column">
+        <contest-work v-for="contestWork in columns[2]" :key="contestWork.id" :contest-work="contestWork"></contest-work>
+      </div>
     </div>
     <div v-show="loading" class="contest-works__loader"><div class="loading-loader"></div></div>
     <div v-if="loaded && !contestWorks.length"  class="contest-works__no-works">Здесь вы сможете увидеть работы участников после их добавления</div>
@@ -38,6 +46,18 @@
         });
       }
     },
+    computed: {
+      columns() {
+        const first = [];
+        const second = [];
+        const third = [];
+        for(let i=0; i < this.contestWorks.length; i++) {
+          const work = this.contestWorks[i];
+          [first, second, third][i % 3].push(work);
+        }
+        return [first, second, third];
+      }
+    },
     methods: {
       load() {
         this.loading = true;
@@ -70,9 +90,13 @@
       width: 100%;
     }
     .contest-works__works {
-      column-width: 300px;
-      column-gap: 20px;
       text-align: left;
+      display: flex;
+    }
+    .contest-works__column {
+      display: flex;
+      flex-direction: column;
+      margin-right: 20px;
     }
     .contest-works__loader {
       width: 100%;