From 20463fa540e3eb9a04e2a196c57b19037369b68e Mon Sep 17 00:00:00 2001
From: Julien Calixte <julienc@bam.tech>
Date: Sun, 15 Mar 2020 10:42:06 +0100
Subject: [PATCH] :art: (account list) change display to grid

---
 src/components/AccountList.vue | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/components/AccountList.vue b/src/components/AccountList.vue
index f4ae1f5..55c440b 100644
--- a/src/components/AccountList.vue
+++ b/src/components/AccountList.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="account-list no-margin">
-    <div class="columns is-centered is-multiline" v-if="accounts.length">
-      <div class="column is-3" v-for="(account, k) in accounts" :key="k">
+  <div class="account-list">
+    <div class="account-grid" v-if="accounts.length">
+      <div v-for="(account, k) in accounts" :key="k">
         <account-card :account="account" />
       </div>
     </div>
@@ -53,6 +53,15 @@ export default class AccountList extends Vue {
 </script>
 
 <style lang="scss" scoped>
+.account-grid {
+  display: grid;
+  gap: 1rem;
+  margin: 0 1rem;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  grid-auto-rows: 120px;
+  justify-content: center;
+}
+
 li {
   margin-bottom: 10px;
   &:last-child {