adding some grid layouts

src/resources/css/layouts/1-col-3-rows.css

@@ -0,0 +1,31 @@
+.page-container {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: minmax(45px, 90px) 1fr auto;
+    gap: 0em 0em;
+    grid-auto-flow: row;
+    grid-template-areas:
+        "header"
+        "content"
+        "footer";
+}
+
+.header {
+    grid-area: header;
+}
+
+.content {
+    grid-area: content;
+}
+
+.footer {
+    grid-area: footer;
+}
+
+/**
+<div class="page-container">
+    <div class="header"></div>
+    <div class="content"></div>
+    <div class="footer"></div>
+</div>
+**/

src/resources/css/layouts/dashboard-3-rows-2-mid-col.css

@@ -0,0 +1,52 @@
+.page-container {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: minmax(45px, 90px) 1fr auto;
+    gap: 0em 0em;
+    grid-auto-flow: row;
+    grid-template-areas:
+        "header"
+        "main-container"
+        "footer";
+}
+
+.header {
+    padding: 0rem 2rem;
+    grid-area: header;
+}
+
+.main-container {
+    display: grid;
+    grid-template-columns: minmax(200px, 350px) 1fr;
+    grid-template-rows: 1fr;
+    gap: 0em 0em;
+    grid-auto-flow: row;
+    grid-template-areas:
+        "sidebar main-content";
+    grid-area: content-container;
+}
+
+.sidebar {
+    grid-area: sidebar;
+}
+
+.main-content {
+    padding: 2rem;
+    grid-area: main-content;
+}
+
+.footer {
+    grid-area: footer;
+}
+
+
+/**
+<div class="page-container">
+    <div class="header"></div>
+    <div class="main-container">
+        <div class="sidebar"></div>
+        <div class="main-content"></div>
+    </div>
+    <div class="footer"></div>
+</div>
+**/