Issue 4961 - Fix card group field alignment on acceptableads.com

static/scss/components/_groups.scss

Index: static/scss/components/_groups.scss
===================================================================
--- a/static/scss/components/_groups.scss
+++ b/static/scss/components/_groups.scss
@@ -276,8 +276,33 @@
   // un-center all cards
   .group > div:nth-child(4),
   .group > div:nth-child(3),
   .group > div:nth-child(5)
   {
     margin-left: 0;
   }
 }
+
+@supports (display: grid) 
+{
+
+  .group 
+  {
+    display: grid;
+    // Each card should be a minimum width of the $card--max-width. Otherwise, take up available space
+    grid-template-columns: repeat(auto-fit, minmax($card--max-width, 1fr));
+  }
+
+  .group-4 

[ire, 2017/06/01 13:14:35]

I haven't dealt with other group sizes yet (e.g. group-5, group-3). I will do
that in a later patch, after this has been approved. 

[juliandoucette, 2017/06/09 14:51:12]

Acknowledged.

+  {
+    @media (min-width: $desktop-breakpoint) {
+      // Each card should take a minimum of 25% width of the group
+      grid-template-columns: repeat(auto-fit, minmax(25%, 1fr));
+    }
+  }
+
+  .group-4 > div 

[juliandoucette, 2017/06/09 14:51:12]

NIT: I'm guessing that you are following the existing code style here. I should
note that I think we should use a class instead of `> div` here. Sorry about
that :(

[ire, 2017/06/12 14:28:54]

Acknowledged.

+  {
+    width: 100%;
+  }
+
+}