From d977f9acaa6b57da84fdf66e4b8af8a93e45102e Mon Sep 17 00:00:00 2001
From: David Taylor <david@taylorhq.com>
Date: Mon, 9 Mar 2020 17:22:38 +0000
Subject: [PATCH] Use CSS grid for improved layout

This avoids the final card being full-width
---
 common/common.scss | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/common/common.scss b/common/common.scss
index 38ff6fb..c63f63a 100644
--- a/common/common.scss
+++ b/common/common.scss
@@ -19,14 +19,14 @@
 }
 
 .user-card-directory {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(calc(min(400px, 100%)), 1fr));
+  grid-gap: 60px 20px;
+  margin-top: 60px;
 
   .user-card {
     z-index: z("base");
     position: relative;
-    left: auto;
     width: 100%;
     box-shadow: none;
     margin: 0;
@@ -41,9 +41,8 @@
   }
 
   .user-card-container {
-    flex-grow: 1;
-    width: 500px;
-    margin: 50px 5px 10px 5px;
+    width: 100%;
+    
     background-color: $secondary;
     box-shadow: shadow("card");
     margin-bottom: auto;