Re-design with css grids for all list view pages

The CSS media tag solution was inferior to this dynamic CSS grid solution.

frontend/src/views/Create.vue

@@ -14,7 +14,9 @@
            
             <h3>Number of songs per player</h3>
             <select v-model="no_songs" class="drop-down"> 
-                <option v-for="n in 8" :key="n">{{ n }}</option>
+                <option v-for="n in 8" :key="n">
+                    {{ n }}
+                </option>
             </select>
             
             <Button
@@ -52,9 +54,9 @@ export default {
             no_songs: 1,
             time_range: 'short_term',
             options: [
-               {text: '4 weeks', value: 'short_term'},
-               {text: '6 months', value: 'medium_term'},
-               {text: 'Over a year', value: 'long_term'} 
+                {text: '4 weeks', value: 'short_term'},
+                {text: '6 months', value: 'medium_term'},
+                {text: 'Over a year', value: 'long_term'} 
             ]
         };
     },
@@ -77,6 +79,7 @@ export default {
 }
 .create {
     margin-top: 0;
+    display: grid;
 }
 
 .settingsbox {