collection list now uses grid sizing

src/renderer/style.less

@@ -1930,12 +1930,28 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
       max-width: 240px;
       flex-grow: 1;
     }
+
+    &.collection-list-square {
+      display: grid;
+      grid-template-columns: repeat(4, minmax(200px, 1fr));
+
+      // screen size > 1200px
+      @media screen and (min-width: 1500px) {
+        grid-template-columns: repeat(6, minmax(200px, 1fr));
+      }
+      // less than 1100px
+      @media screen and (max-width: 1150px) {
+        grid-template-columns: repeat(3, minmax(200px, 1fr));
+      }
+    }
   }
 }
 
 .cd-mediaitem-square-container{
   display: inline-flex;
   flex-direction: column;
+  justify-content: center;
+  align-items: center;
 }
 
 .reasonSP{

src/renderer/views/pages/collection-list.ejs

@@ -1,7 +1,7 @@
 <script type="text/x-template" id="cider-collection-list">
     <div class="content-inner collection-page">
         <h3 class="header-text" v-observe-visibility="{callback: headerVisibility}">{{ title }}</h3>
-        <div v-if="data['data'] != 'null'" class="well itemContainer">
+        <div v-if="data['data'] != 'null'" class="well itemContainer" :class="getClasses()">
             <template v-for="(item, key) in data.data">
                 <template v-if="item.type == 'artists'">
                     <mediaitem-square :item="item"></mediaitem-square>
@@ -57,6 +57,13 @@
             }
         },
         methods: {
+            getClasses() {
+                if(this.commonKind != "song") {
+                    return "collection-list-square";
+                }else{
+                    return "";
+                }
+            },
             getKind(item) {
                 if (typeof item.kind != "undefined") {
                     this.commonKind = item.kind;