css grid to pack my layout

src/containers/App.tsx

@@ -6,30 +6,22 @@ import { SomeComponent } from '$components/SomeComponent';
 import { ConnectedRouter } from "connected-react-router";
 import { history } from "$redux/store";
 import { NavLink, Switch, Route } from 'react-router-dom';
+import { MainLayout } from "$containers/MainLayout";
+import { FlowLayout } from "$containers/FlowLayout";
 
 interface IAppProps {}
 interface IAppState {}
 
 class Component extends React.Component<IAppProps, IAppState> {
-  state = { };
-
   render() {
     return (
       <ConnectedRouter history={history}>
         <div>
-          <div>
-            <NavLink exact to="/" activeClassName="active">
-              Root
-            </NavLink>
-            <NavLink to="/somepath" activeClassName="active">
-              Something
-            </NavLink>
-          </div>
           <Switch>
             <Route
               exact
               path="/"
-              component={SomeComponent}
+              component={FlowLayout}
             />
             <Route
               path="/somepath"

src/containers/FlowLayout/index.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { MainLayout } from "$containers/MainLayout";
+import { HeroPlaceholder } from "$components/flow/HeroPlaceholder";
+import { TestGrid } from "$components/flow/TestGrid";
+// const style = require('./style.scss');
+
+export const FlowLayout = () => (
+  <MainLayout>
+    <div className="default_container content_container">
+      <TestGrid />
+    </div>
+  </MainLayout>
+);

src/containers/MainLayout/index.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { Header } from "$components/main/Header";
+
+const style = require('./style.scss');
+
+export const MainLayout = ({ children }) => (
+  <div className={style.wrapper}>
+    <Header />
+    {children}
+  </div>
+);

src/containers/MainLayout/style.scss

@@ -0,0 +1,4 @@
+.wrapper {
+  width: 100%;
+  //padding: $gap 0;
+}