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,86 @@
   // 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.cards

[ire, 2017/06/21 07:47:58]

I opted for `.group.cards` instead of just `.cards` here for 2 reasons:

1. This appears to be the way it's already done, see `.group.items` above
2. If I didn't add the group selector, it wouldn't make sense to leave the
styles in the _groups.scss file, I would have to move it to _cards.scss . But,
since the .group styles are defined after in the cascade, they won't be
overridden as we want.

+  {
+    display: grid;
+    grid-template-columns: repeat(1, 1fr);
+
+    @media (min-width: $card-min-width)
+    {
+      // Each card should be a minimum width of the $card-min-width. Otherwise, take up available space
+      grid-template-columns: repeat(auto-fit, minmax($card-min-width, 1fr));
+    }
+  }
+
+  .group.cards .card
+  {
+    display: inline-grid;
+    width: 100%;
+    grid-template-rows: auto 1fr auto;
+  }
+
+  .group.cards .card-summary
+  {
+    @media all
+    {
+      height: auto;
+    }
+  }
+
+  .group-4.cards
+  {
+    @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-5.cards
+  {
+    @media (min-width: $tablet-breakpoint)
+    {
+      grid-template-columns: repeat(auto-fit, minmax(33.3%, 1fr));
+    }
+    @media (min-width: $desktop-breakpoint)
+    {
+      grid-template-columns: repeat(auto-fit, minmax(20%, 1fr));
+    }
+  }
+
+  .group-5.cards > div:nth-child(4),
+  .group-5.cards > div:nth-child(5)
+  {
+    @media all
+    {
+      margin-left: 0;
+    }
+  }
+
+  .group-5.cards > div:nth-child(4)
+  {
+    @media (min-width: $tablet-breakpoint) and (max-width: $desktop-breakpoint)
+    {
+      margin-left: 50%;
+    }
+  }
+
+  .group-5.cards > div:nth-child(5)
+  {
+    @media (min-width: 700px) and (max-width: $desktop-breakpoint)

[ire, 2017/06/21 07:47:58]

I had to use 700px here instead of a variables because that's the exact
breakpoint

+    {
+      margin-left: 50%;
+    }
+  }
+
+}