From 9416b99ec9ec46d9f78eaa51d7f0c187d1468b0a Mon Sep 17 00:00:00 2001
From: Oliver Davies <oliver@oliverdavies.uk>
Date: Thu, 5 Mar 2020 00:18:47 +0000
Subject: [PATCH] Use CSS Grid for application cards

Fixes #63
---
 src/views/Projects.vue | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/views/Projects.vue b/src/views/Projects.vue
index eafe6ff..48fe5a0 100644
--- a/src/views/Projects.vue
+++ b/src/views/Projects.vue
@@ -14,8 +14,18 @@
       </div>
 
       <div class="mt-6">
-        <div v-if="displayMode == 'grid'" class="flex flex-wrap -mt-8 mb-4 -mx-4">
-          <div class="w-full px-4 mt-8 sm:w-1/2 lg:w-1/3" v-for="project in projects" :key="project.id">
+        <div
+          v-if="displayMode == 'grid'"
+          class="
+            grid gap-8
+            md:grid-cols-2
+            xl:grid-cols-3
+          "
+        >
+          <div
+            v-for="project in projects"
+            :key="project.id"
+          >
             <project-card :project="project"/>
           </div>
         </div>