Bug 1521583 - vertical alignment of grid. (#4692)

* Bug 1521583 - vertical alignment of grid.

* Update vertical gap on layouts

content-src/components/DiscoveryStreamBase/DiscoveryStreamBase.jsx

@@ -170,12 +170,14 @@ export class _DiscoveryStreamBase extends React.PureComponent {
       <div className="discovery-stream ds-layout">
         {layoutRender.map((row, rowIndex) => (
           <div key={`row-${rowIndex}`} className={`ds-column ds-column-${row.width}`}>
-            {row.components.map((component, componentIndex) => {
-              styles[rowIndex] = [...styles[rowIndex] || [], component.styles];
-              return (<div key={`component-${componentIndex}`}>
-                {this.renderComponent(component)}
-              </div>);
-            })}
+            <div className="ds-column-grid">
+              {row.components.map((component, componentIndex) => {
+                styles[rowIndex] = [...styles[rowIndex] || [], component.styles];
+                return (<div key={`component-${componentIndex}`}>
+                  {this.renderComponent(component)}
+                </div>);
+              })}
+            </div>
           </div>
         ))}
         {this.renderStyles(styles)}

content-src/components/DiscoveryStreamBase/_DiscoveryStreamBase.scss

@@ -5,10 +5,12 @@
 
 .discovery-stream.ds-layout {
   $columns: 12;
+  --gridColumnGap: 48px;
+  --gridRowGap: 24px;
   display: grid;
   grid-template-columns: repeat($columns, 1fr);
-  grid-column-gap: 48px;
-  grid-row-gap: 10px;
+  grid-column-gap: var(--gridColumnGap);
+  grid-row-gap: var(--gridRowGap);
   width: 936px;
   margin: 0 auto;
 
@@ -21,8 +23,8 @@
     $columns: $columns - 1;
   }
 
-  .ds-column {
+  .ds-column-grid {
     display: grid;
-    grid-row-gap: 10px;
+    grid-row-gap: var(--gridRowGap);
   }
 }