Fix Bug 1514913 - Hello world Pocket + New Tab test experiment (#4596)

* Fix Bug 1514913 - Hello world Pocket + New Tab test experiment

* review updates

* Fixes to grid

content-src/components/Sections/Sections.jsx

@@ -306,7 +306,26 @@ export class _Sections extends React.PureComponent {
     return sections;
   }
 
+  renderLayout() {
+    return (
+      <div className="sections-list layout">
+        {this.props.Layout.map((section, sectionIndex) => (
+          <div key={`section-${sectionIndex}`} className={`column column-${section.width}`}>
+            {section.components.map((component, componentIndex) => (
+              <div key={`component-${componentIndex}`}>
+                <div>{component.type}</div>
+              </div>
+            ))}
+          </div>
+        ))}
+      </div>
+    );
+  }
+
   render() {
+    if (this.props.Layout && this.props.Layout.length) {
+      return this.renderLayout();
+    }
     return (
       <div className="sections-list">
         {this.renderSections()}

content-src/components/Sections/_Sections.scss

@@ -1,4 +1,25 @@
 .sections-list {
+  &.layout {
+    $columns: 12;
+    display: grid;
+    grid-template-columns: repeat($columns, 1fr);
+    grid-column-gap: 10px;
+    grid-row-gap: 10px;
+
+    .column {
+      border: 1px solid $black;
+    }
+
+    @while $columns > 0 {
+      .column-#{$columns} {
+        grid-column-start: auto;
+        grid-column-end: span $columns;
+      }
+
+      $columns: $columns - 1;
+    }
+  }
+
   .section-list {
     display: grid;
     grid-gap: $base-gutter;