14 - Grid Template Areas Finished

Author: jonathanedempsey

14 - Grid Template Areas/area-line-names-START.html

@@ -46,8 +46,17 @@
     .container {
       display: grid;
       grid-gap: 20px;
+      grid-template-areas:
+        "💩 💩 💩 💩 🍔 🍔 🍔 🍔"
+        "💩 💩 💩 💩 🍔 🍔 🍔 🍔"
+        "💩 💩 💩 💩 🍔 🍔 🍔 🍔"
+        "💩 💩 💩 💩 🍔 🍔 🍔 🍔";
+    }
+
+    .item3 {
+      grid-column: 💩-start / 💩-end;
     }
   </style>
 </body>
 
-</html>
+</html>

14 - Grid Template Areas/areas-START.html

@@ -29,8 +29,39 @@
     .container {
       display: grid;
       grid-gap: 20px;
+      grid-template-columns: 1fr 10fr 1fr;
+      grid-template-rows: 150px 150px 100px;
+      grid-template-areas:
+        "sidebar-1  content  sidebar-2"
+        "sidebar-1  content  sidebar-2"
+        "footer     footer   footer";
+    }
+
+    .footer {
+      grid-area: footer;
+    }
+
+    .item1 {
+      grid-area: sidebar-1;
+    }
+
+    .item2 {
+      grid-area: content;
+    }
+
+    .item3 {
+      grid-area: sidebar-2;
+    }
+
+    @media (max-width: 700px) {
+      .container {
+        grid-template-areas:
+          "content  content  content"
+          "sidebar-1  sidebar-1  sidebar-2"
+          "footer     footer   footer";
+      }
     }
   </style>
 </body>
 
-</html>
+</html>