From 218664dfccdec0fa7a7f798fef784406ba6bfb83 Mon Sep 17 00:00:00 2001
From: Ryan Holinshead <ryanholinshead@hotmail.com>
Date: Mon, 27 Nov 2017 18:54:03 -0800
Subject: [PATCH] (ISSUE-9353) Fix pinned item alignment (#9358)

* (ISSUE-9353) Fix pinned item alignment
- Get rid of justify-content: space-between to allow flex-start default to be used
- Add margin to direct children (item-wrappers)

* Issue-9353: Change selector to & > div instead of just > for more explicit selection of direct child divs

* Fix rewards item spacing to match Zeplin mockups
- Make sure horizontal/vertical spacing between items is 16px
- Add use of grid if supported, else use flex
---
 website/client/components/tasks/column.vue | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/website/client/components/tasks/column.vue b/website/client/components/tasks/column.vue
index c70341a76e..58035d7af2 100644
--- a/website/client/components/tasks/column.vue
+++ b/website/client/components/tasks/column.vue
@@ -79,9 +79,20 @@
 
 
   .reward-items {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
+    @supports (display: grid) {
+      display: grid;
+      grid-column-gap: 16px;
+      grid-row-gap: 4px;
+      grid-template-columns: repeat(auto-fill, 94px);
+    }
+
+    @supports not (display: grid) {
+      display: flex;
+      flex-wrap: wrap;
+      & > div {
+      margin: 0 16px 4px 0;
+      }
+    }
   }
 
   .tasks-list {