public/example/index.html

@@ -13,12 +13,30 @@
     <a href="#">Clients</a>
     <a href="#">Contact</a>
 </div>
-
 <div id="main">
-    <button class="openbtn" onclick="openNav()">&#9776; Open Sidebar</button>
-    <h2>Collapsed Sidebar</h2>
-    <p>Content...</p>
+    <div class="content">
+        <div class="grid-container">
+            <div class="header">
+                <p>header</p>
+            </div>
+            <div class="left">
+                <button class="openbtn" onclick="openNav()">&#9776;</button>
+                <h2>Collapsed Sidebar</h2>
+            </div>
+            <div class="main">
+                <p>main</p>
+            </div>
+            <div class="right">
+                <p>right</p>
+            </div>
+            <div class="footer">
+                <p>footer</p>
+            </div>
+        </div>
+    </div>
 </div>
+
+<!-- scripts -->
 <script src="example.js"></script>
 </body>
 </html>

static/Styles/example.css

@@ -65,4 +65,35 @@
     .sidebar a {
         font-size: 18px;
     }
+}
+
+
+/* grid layout for the content */
+.grid-container {
+    display: grid;
+    grid-template-areas: 'left header header'
+                         'left   main   right'
+                         'footer footer footer';
+    grid-template-columns: [left] 80px [line2] calc(100% - 160px) [line3] 80px [right];
+    grid-template-rows: [top] 80px [line2] calc(100% - 160px) [line3] 80px [bottom];
+}
+
+.left {
+    grid-area: left;
+}
+
+.right {
+    grid-area: right;
+}
+
+.header {
+    grid-area: header;
+}
+
+.main {
+    grid-area: main;
+}
+
+.footer {
+    grid-area: footer;
 }