fixed grid layout

src/components/flow/TestGrid/index.tsx

@@ -11,8 +11,8 @@ const style = require('./style.scss');
 
 export const TestGrid = () => (
   <div className={style.grid_test}>
-    <div className={classnames([style.cell, style.vert_1, style.hor_2])} key="b" />
-    <div className={classnames([style.cell, style.vert_1, style.hor_2])} key="a" />
+    <div className={classnames([style.cell, style.vert_1, style.hor_4])} key="b" />
+    <div className={classnames([style.cell, style.vert_2, style.hor_1, style.pad_last])} key="a" />
     <div className={classnames([style.cell, style.vert_1, style.hor_1])} key="c" />
     <div className={classnames([style.cell, style.vert_1, style.hor_1])} key="d" />
     <div className={classnames([style.cell, style.vert_2, style.hor_3])} key="e" />
@@ -20,7 +20,7 @@ export const TestGrid = () => (
     <div className={classnames([style.cell, style.vert_2, style.hor_1])} key="g" />
     <div className={classnames([style.cell, style.vert_2, style.hor_1])} key="h" />
     <div className={classnames([style.cell, style.vert_4, style.hor_1])} key="i" />
-    <div className={classnames([style.cell, style.vert_1, style.hor_1])} key="i" />
+    <div className={classnames([style.cell, style.vert_1, style.hor_1])} key="j" />
   </div>
 );
 

src/components/flow/TestGrid/style.scss

@@ -1,3 +1,5 @@
+$cols: $content_width / $cell;
+
 .grid {
   //display: grid;
   padding: $gap / 2;
@@ -5,12 +7,15 @@
 }
 
 .grid_test {
-  width: 1024px;
+  width: $content_width;
   display: grid;
-  grid-template-columns: repeat(5, 256px);
-  grid-template-rows: repeat(2, 256px);
+  grid-template-columns: repeat($cols, 1fr);
+  grid-template-rows: $cell * 1.2 - 4;
   grid-auto-rows: 256px;
   grid-auto-flow: row dense;
+
+  grid-column-gap: 4px;
+  grid-row-gap: 4px;
 }
 
 .cell {
@@ -18,13 +23,14 @@
   box-sizing: border-box;
   display: flex;
   flex: 0 0;
+  background: $cell_bg;
 
-  &::after {
-    content: ' ';
-    background: transparentize(white, 0.9);
-    width: 100%;
-    height: 100%;
-  }
+  //&::after {
+  //  content: ' ';
+  //  background: transparentize(white, 0.9);
+  //  width: 100%;
+  //  height: 100%;
+  //}
 }
 
 .vert_2 {
@@ -50,3 +56,7 @@
 .hor_4 {
   grid-column-end: span 4;
 }
+
+.pad_last {
+  grid-column-end: $cols + 1;
+}

src/components/main/Header/index.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 const style = require('./style.scss');
-const logo_sm = require('$sprites/logo_sm.svg');
 
 export const Header = () => (
   <div className="default_container head_container">
@@ -14,10 +13,13 @@ export const Header = () => (
         <div>boris</div>
         <div>flow</div>
       </div>
-      <div className={style.user_button}>
-        <div className={style.user_avatar} />
-        gvorcek
-      </div>
     </div>
   </div>
 );
+
+/*
+  <div className={style.user_button}>
+    <div className={style.user_avatar} />
+    gvorcek
+  </div>
+ */

src/components/main/Header/style.scss

@@ -3,7 +3,8 @@
   align-items: center;
   justify-content: flex-end;
   font-weight: 500;
-  padding: $gap $spc;
+  //padding: $gap 0;
+  height: 100px;
 }
 
 .logo {
@@ -34,6 +35,8 @@
       height: $gap;
       display: block;
     }
+
+    &:last-child::after { display: none; }
   }
 }