From 28f96a1d0db54a89546c47c8ffc5b306723b35f3 Mon Sep 17 00:00:00 2001
From: Matthew Taylor <mewtaylor@gmail.com>
Date: Wed, 24 Aug 2016 10:23:26 -0400
Subject: [PATCH 1/3] Align grid items on the left

use `flex-start` with margins to ensure proper spacing between, while still starting at the left of each row.
---
 src/components/grid/grid.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/grid/grid.scss b/src/components/grid/grid.scss
index d890a0e2d..97047f516 100644
--- a/src/components/grid/grid.scss
+++ b/src/components/grid/grid.scss
@@ -15,10 +15,11 @@
         margin: 0 auto;
         padding: 12px;
         width: $cols12;
-        justify-content: space-between;
+        justify-content: flex-start;
     }
 
     .thumbnail {
+        margin: 6px;
         padding: 0;
 
         &.project {

From fb5d9788f86faf7c50a77e6c622474498bed47e1 Mon Sep 17 00:00:00 2001
From: Matthew Taylor <mewtaylor@gmail.com>
Date: Wed, 24 Aug 2016 10:24:01 -0400
Subject: [PATCH 2/3] Re-structure grid styling a bit

combine stylings where possible, re-name some of the variables to be used more often
---
 src/components/grid/grid.scss | 36 +++++++++++++++++------------------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/src/components/grid/grid.scss b/src/components/grid/grid.scss
index 97047f516..914090982 100644
--- a/src/components/grid/grid.scss
+++ b/src/components/grid/grid.scss
@@ -5,11 +5,11 @@
     display: inline-block;
     width: 100%;
 
-    $project-width: 220px;
+    $thumbnail-width: 220px;
+    $thumbnail-inner-width: 204px;
+    
     $project-height: 208px;
-
-    $gallery-width: 200px;
-    $gallery-height: 118px;
+    $gallery-height: 164px;
 
     .flex-row {
         margin: 0 auto;
@@ -22,46 +22,46 @@
         margin: 6px;
         padding: 0;
 
+        &.gallery,
         &.project {
             margin-bottom: 16px;
             border-radius: 4px;
             box-shadow: 0 0 3px $box-shadow-gray;
             background-color: $ui-white;
-            width: $project-width;
-            height: $project-height;
+            width: $thumbnail-width;
 
             .thumbnail-image {
                 margin: 8px auto;
-                width: 204px;
+                width: $thumbnail-inner-width;
+            }
+        }
+
+        &.project {
+            height: $project-height;
+
+            .thumbnail-image {
                 height: 152px;
 
                 img {
                     margin: 0 auto;
                     border: 0;
                     border-radius: 4px;
-                    width: 204px;
+                    width: $thumbnail-inner-width;
                     height: 152px;
                 }
             }
         }
 
         &.gallery {
-            margin-bottom: 16px;
-            border-radius: 4px;
-            box-shadow: 0 0 3px $box-shadow-gray;
-            background-color: $ui-white;
-            width: $project-width;
-            height: 164px;
+            height: $gallery-height;
 
             .thumbnail-image {
-                margin: 8px auto;
-                width: 204px;
                 height: 120px;
 
                 img {
                     border: 0;
                     border-radius: 4px;
-                    width: 204px;
+                    width: $thumbnail-inner-width;
                     height: 120px;
                 }
             }
@@ -69,7 +69,7 @@
 
         .thumbnail-info {
             margin: 0 auto;
-            width: 204px;
+            width: $thumbnail-inner-width;
 
             .creator-image {
                 float: left;

From 5dd80c10200c868f7df23cd7a3d2e0cb6cb65d36 Mon Sep 17 00:00:00 2001
From: Matthew Taylor <mewtaylor@gmail.com>
Date: Wed, 24 Aug 2016 10:55:13 -0400
Subject: [PATCH 3/3] additional reformatting

---
 src/components/grid/grid.scss | 71 ++++++++++++++++-------------------
 1 file changed, 33 insertions(+), 38 deletions(-)

diff --git a/src/components/grid/grid.scss b/src/components/grid/grid.scss
index 914090982..2afed6b19 100644
--- a/src/components/grid/grid.scss
+++ b/src/components/grid/grid.scss
@@ -13,26 +13,46 @@
 
     .flex-row {
         margin: 0 auto;
-        padding: 12px;
+        padding: 12px 0;
         width: $cols12;
         justify-content: flex-start;
     }
 
     .thumbnail {
-        margin: 6px;
-        padding: 0;
+        margin: 7px;
+        border-radius: 4px;
+        box-shadow: 0 0 3px $box-shadow-gray;
+        background-color: $ui-white;
+        padding-bottom: 4px;
+        width: $thumbnail-width;
 
-        &.gallery,
-        &.project {
-            margin-bottom: 16px;
-            border-radius: 4px;
-            box-shadow: 0 0 3px $box-shadow-gray;
-            background-color: $ui-white;
-            width: $thumbnail-width;
+        .thumbnail-image {
+            margin: 8px auto;
+            width: $thumbnail-inner-width;
+        }
 
-            .thumbnail-image {
-                margin: 8px auto;
-                width: $thumbnail-inner-width;
+        .thumbnail-info {
+            margin: 0 auto;
+            width: $thumbnail-inner-width;
+
+            .creator-image {
+                float: left;
+
+                img {
+                    margin-right: 8px;
+                    border-radius: 4px;
+                    width: 32px;
+                    height: 32px;
+                }
+            }
+
+            .thumbnail-title {
+                float: left;
+                max-width: 164px;
+
+                .thumbnail-creator a {
+                    color: $type-gray;
+                }
             }
         }
 
@@ -66,31 +86,6 @@
                 }
             }
         }
-
-        .thumbnail-info {
-            margin: 0 auto;
-            width: $thumbnail-inner-width;
-
-            .creator-image {
-                float: left;
-
-                img {
-                    margin-right: 8px;
-                    border-radius: 4px;
-                    width: 32px;
-                    height: 32px;
-                }
-            }
-
-            .thumbnail-title {
-                float: left;
-                max-width: 164px;
-
-                .thumbnail-creator a {
-                    color: $type-gray;
-                }
-            }
-        }
     }
 
     &.column {