From 192ce479c9aa5e27b697337fe019a83e1c87529e Mon Sep 17 00:00:00 2001
From: geoffrey45 <geoffreymungai45@gmail.com>
Date: Sun, 14 Nov 2021 16:48:20 +0300
Subject: [PATCH] create css grid

---
 src/App.vue | 58 +++++++++++++++++++++++++++++++++++++++++++++++++----
 1 file changed, 54 insertions(+), 4 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index b9643551..528cf9f9 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,9 +1,17 @@
 <template>
-  <div id="nav">
-    <router-link to="/">Home</router-link> |
-    <router-link to="/about">About</router-link>
+  <div class="container">
+    <div class="l-sidebar"></div>
+    <div class="nav">
+      <div id="nav">
+        <router-link to="/">Home</router-link> |
+        <router-link to="/about">About</router-link>
+      </div>
+    </div>
+    <div class="content">
+      <router-view />
+    </div>
+    <div class="r-sidebar"></div>
   </div>
-  <router-view/>
 </template>
 
 <style>
@@ -27,4 +35,46 @@
 #nav a.router-link-exact-active {
   color: #42b983;
 }
+
+.container {
+  display: grid;
+  grid-template-columns: 50px 4fr 0fr;
+  grid-template-rows: 0.1fr 1fr 1fr;
+  /* grid-auto-columns: 1fr 1fr 1fr;
+  grid-auto-rows: 1fr 1fr 1fr; */
+  gap: 4px;
+  grid-auto-flow: row;
+  grid-template-areas:
+    "l-sidebar nav nav"
+    "l-sidebar content r-sidebar"
+    "l-sidebar content r-sidebar";
+  width: 100vw;
+  height: 100vh;
+}
+
+.l-sidebar {
+  grid-area: l-sidebar;
+  border: solid;
+  /* height: calc(100vh - 98px); */
+}
+
+.nav {
+  grid-area: nav;
+  border: solid;
+  max-height: 70px;
+}
+
+.content {
+  grid-area: content;
+  border: solid;
+}
+body {
+  margin: 0;
+}
+
+.r-sidebar {
+  grid-area: r-sidebar;
+  border: solid;
+  /* max-width: 500px; */
+}
 </style>