Completed exercise 01

Note: used "fr"s instead of px, and areas instead of spanning

01-grid-layout-1/style.css

@@ -9,6 +9,14 @@ html {
   height: 100%;
   padding: 16px;
   box-sizing: border-box;
+  display: grid;
+  grid-template-columns: 1fr 3fr;
+  grid-template-rows: 1fr 1fr 5fr 1fr;
+  grid-template-areas: "header header"
+                       "sidebar nav"
+                       "sidebar article"
+                       "footer footer";
+  gap: 15px;
 }
 
 .container div {
@@ -22,21 +30,26 @@ html {
 
 .header {
   background-color: #006157;
+  grid-area: header;
 }
 
 .sidebar {
+  grid-area: sidebar;
   background-color: #005B94;
 }
 
 .nav {
+  grid-area: nav;
   background-color: #642cde;
 }
 
 .article {
+  grid-area: article;
   background-color: #7E1DC3;
 }
 
 .footer {
+  grid-area: footer;
   background-color: #393f4d;
 }