fixed grid

src/components/flow/TestGrid/index.tsx

@@ -2,21 +2,33 @@ import * as React from 'react';
 import { Cell } from "~/components/flow/Cell";
 import { range } from 'ramda';
 
-const style = require('./style.scss');
+import * as styles from './styles.scss';
 
 export const TestGrid = () => (
-  <div className={style.grid_test}>
-    <Cell
-      height={1}
-      width={4}
-      title="Example cell Example cell Example cell Example cell Example cell Example cell Example cell "
-      is_hero
-    />
+  <div className={styles.grid_test}>
+    <div style={{
+      gridRow: '1 / 2',
+      gridColumn: '1 / -1',
+      background: 'green',
+    }}
+    >
+      HERO
+    </div>
+
+    <div style={{
+      gridRow: '2 / 4',
+      gridColumn: '-2 / -1',
+      background: 'blue',
+    }}
+    >
+      STAMP
+    </div>
+
     {
       range(1,20).map(el => (
         <Cell
-          width={1}
-          height={1}
+          width={Math.floor(Math.random() * 3)}
+          height={Math.floor(Math.random() * 3)}
           title="Example cell Example cell Example cell Example cell Example cell Example cell Example cell "
         />
       ))

src/components/flow/TestGrid/styles.scss

@@ -7,10 +7,12 @@ $cols: $content_width / $cell;
 }
 
 .grid_test {
-  width: $content_width;
+  //width: $content_width;
   display: grid;
-  grid-template-columns: repeat($cols, 1fr);
-  grid-template-rows: $cell * 1.2 - 4;
+  //grid-template-columns: minmax($cell, 1fr);
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  //grid-template-columns: repeat($cols, 1fr);
+  //grid-template-rows: $cell * 1.2 - 4;
   grid-auto-rows: 256px;
   grid-auto-flow: row dense;
 

src/containers/main/MainLayout/styles.scss

@@ -11,5 +11,4 @@
 .content {
   flex: 0 1 $content_width;
   position: relative;
-  background: red;
 }