Add Advanced Grid Demos

colossus21 · Jun 8, 2019 · 317f6ca · 317f6ca
1 parent 933ce68
commit 317f6ca
Show file tree

Hide file tree

Showing 3 changed files with 187 additions and 0 deletions.
diff --git a/grid.css b/grid.css
@@ -55,4 +55,96 @@ code {
 }
 .nested > div:nth-child(odd) {
     background-color: lightgoldenrodyellow;
+}
+
+.box-wrapper {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-auto-rows: 200px;
+    grid-gap: 2rem;
+    height: 100vh;
+    width: 100vw;
+    /* horizontal: start, end, center */
+    justify-items: stretch;
+    /* vertical: start, end, center */
+    align-items: stretch;
+}
+
+.box {
+    background-color: lightslategray;
+    color: white;
+    font-size: 1.5rem;
+    border: 2px solid red;
+}
+
+
+.box1 {
+    grid-column: 1/4;
+    grid-row:1;
+}
+
+.box2 {
+    grid-column: 1/2;
+    grid-row:2/3;
+}
+
+.box3 {
+    grid-column: 2;
+    grid-row: 2/4;
+}
+
+.box4 {
+    grid-column: 2/4;
+    grid-row: 3/4;
+}
+
+.box5 {
+    color: lightgreen;
+}
+
+.box6 {
+    color: lightgreen;
+}
+
+.site {
+    display:grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-rows: 1fr 1fr 1fr 1fr;
+    height: 100vh;
+    width: 100vw;
+    grid-gap: 3px;
+    grid-template-areas:
+        "head head head"
+        "nav text text"
+        "nav text text"
+        "foot foot foot"
+}
+
+.title {
+    grid-area: head;
+    background-color: lightblue;
+}
+.menu {
+    grid-area: nav;
+    background-color: lightcoral;
+}
+.content {
+    grid-area: text;
+    background-color: lightgoldenrodyellow;
+}
+.footer {
+    grid-area: foot;
+    background-color: lightgrey;
+    align-content: center;
+}
+
+@media screen and (max-width: 960px) {
+    .site {
+        grid-template-rows: 1fr 1fr 2fr 1fr; 
+        grid-template-areas:
+        "head head head"
+        "nav nav nav"
+        "text text text"
+        "foot foot foot";
+    }
 }
diff --git a/grid2.html b/grid2.html
@@ -0,0 +1,21 @@
+<html>
+    <head>
+        <title>Grid</title>
+        <link rel="stylesheet" href="grid.css">
+        <style>
+        body {
+                overflow: hidden;
+        }
+        </style>
+    </head>
+    <body>
+        <div class="box-wrapper">
+                <div class="box box1">1# Col(1-4), Row(1-2)</div>
+                <div class="box box2">2# Col(1-2), Row(2-3)</div>
+                <div class="box box3">3# Col(2-3), Row(2-4)</div>
+                <div class="box box4">4# Col(2-4), Row(3-4)</div>
+                <div class="box box5">5# auto</div>
+                <div class="box box6">6# auto</div>
+        </div>
+    </body>
+</html>
diff --git a/grid3.html b/grid3.html
@@ -0,0 +1,74 @@
+<html>
+    <head>
+        <title>Grid</title>
+        <link rel="stylesheet" href="grid.css">
+        <style>
+        body {
+            overflow: hidden;
+            margin: 0;
+            padding: 0;
+        }
+        #desc {
+            font-size: 1.5rem;
+            font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+            color: darkcyan;
+        }
+        #layout {
+            color: red;
+            font-size: 1.5rem;
+        }
+        </style>
+    </head>
+    <body>
+        <div class="site">
+            <div class="title">
+                <h1>HEAD</h1>
+                <h3>Welcome to CSS Grid Tutorial</h3>
+            </div>
+            <div class="menu">
+                <h1>MENU</h1>
+                <ul>
+                    <li><a href="grid1.html">Page1</a></li>
+                    <li><a href="grid2.html">Page2</a></li>
+                    <li><a href="grid3.html">Page3</a></li>
+                </ul>
+            </div>
+            <div class="content">
+                <h1>CONTENT</h1>
+                <p id="desc">
+                    grid-template-columns: 1fr 1fr 1fr; <br>
+                    grid-template-rows: 1fr 1fr 1fr 1fr; <br><br>
+                    grid-template-areas: <br>
+                    <div id="layout">
+                    "head head head" <br>
+                    "nav text text" <br>
+                    "nav text text" <br>
+                    "foot foot foot" <br>
+                    </div>
+                </p>
+            </div>
+            <div class="footer">
+                <h1>FOOTER</h1>
+                <footer>Visit github.com/colossus21 for more!</footer>
+            </div>
+        </div>
+        <script>
+                let below960 = `"head head head" <br>
+                          "nav nav nav" <br>
+                          "text text text" <br>
+                          "foot foot foot" <br>`;
+                let above960 = `"head head head" <br>
+                        "nav text text" <br>
+                        "nav text text" <br>
+                        "foot foot foot" <br>`
+                let layout = document.getElementById("layout")          
+                window.addEventListener("resize", function() {
+                    if (window.innerWidth <= 960) {
+                        layout.innerHTML = below960
+                    } else {
+                        layout.innerHTML = above960
+                    }
+                })          
+            </script>
+    </body>
+</html>