Bug 1520568 – Add 1/3 and 2/3 layouts for CardGrid (#4667)

content-src/components/DiscoveryStreamComponents/CardGrid/CardGrid.jsx

@@ -19,7 +19,7 @@ export class CardGrid extends React.PureComponent {
         title={rec.title}
         excerpt={rec.title}
         url={rec.url}
-        source={`TODO: SOURCE`} />
+        source={rec.domain} />
     ));
 
     return (

content-src/components/DiscoveryStreamComponents/CardGrid/_CardGrid.scss

@@ -1,11 +1,28 @@
 .ds-card-grid {
   display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  grid-gap: 24px;
 
   .ds-card {
     background: $white;
     box-shadow: 0 1px 4px $grey-10-10;
     border-radius: 4px;
+    margin-bottom: 24px;
+  }
+
+  // "2/3 width layout"
+  .ds-column-5 &,
+  .ds-column-6 &,
+  .ds-column-7 &,
+  .ds-column-8 & {
+    grid-template-columns: repeat(2, 1fr);
+    grid-gap: 24px;
+  }
+
+  // "Full width layout"
+  .ds-column-9 &,
+  .dscolumn-10 &,
+  .ds-column-11 &,
+  .ds-column-12 & {
+    grid-template-columns: repeat(4, 1fr);
+    grid-gap: 24px;
   }
 }