Bug 1519775 - Make one and two-column lists work

content-src/components/DiscoveryStreamBase/DiscoveryStreamBase.jsx

@@ -161,11 +161,13 @@ export class _DiscoveryStreamBase extends React.PureComponent {
       case "HorizontalRule":
         return (<HorizontalRule />);
       case "List":
-        rows = this.extractRows(component, MAX_ROWS_LIST);
+        rows = this.extractRows(component,
+          Math.min(component.properties.items, MAX_ROWS_LIST));
         return (
           <ImpressionStats rows={rows} dispatch={this.props.dispatch} source={component.type}>
             <List
               feed={component.feed}
+              items={component.properties.items}
               type={component.type}
               header={component.header} />
           </ImpressionStats>

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

@@ -19,7 +19,7 @@
 
   // "Full width layout"
   .ds-column-9 &,
-  .dscolumn-10 &,
+  .ds-column-10 &,
   .ds-column-11 &,
   .ds-column-12 & {
     grid-template-columns: repeat(4, 1fr);

content-src/components/DiscoveryStreamComponents/List/_List.scss

@@ -28,13 +28,31 @@ $item-line-height: 20;
 
 .ds-list {
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-row-gap: 18px;
+  grid-row-gap: 24px;
   grid-column-gap: 24px;
 
   // reset some stuff from <ul>.  Should maybe be hoisted when we have better
   // regression detection?
   padding-inline-start: 0;
+
+  // "2/3 width layout"
+  .ds-column-5 &,
+  .ds-column-6 &,
+  .ds-column-7 &,
+  .ds-column-8 & {
+    grid-template-columns: repeat(2, 1fr);
+    grid-row-gap: 24px;
+  }
+
+  // "Full width layout"
+  .ds-column-9 &,
+  .ds-column-10 &,
+  .ds-column-11 &,
+  .ds-column-12 & {
+    grid-template-columns: repeat(3, 1fr);
+    grid-row-gap: 18px;
+  }
+
 }
 
 // XXX this is gross, and attaches the bottom-border to the item above.