rework grid to use template-area

diff --git a/css/style.css b/css/style.css
index a77c56ecc73952da7c5efd927afaa6e4d0109eb7..1b658d7c2c11ec7e5ef44d844fccd3447b03b665 100644 (file)
--- a/css/style.css
+++ b/css/style.css
@@ -1,11 +1,10 @@
 body {
   margin: 0;
-  /*display: flex;
-  flex-direction: column;*/
   display: grid;
-  min-height: 100vh;
-  /*grid-template-rows: auto 1fr auto;*/
-  grid-template-columns: 0.2fr 1fr;
+  grid-template-areas:
+    "header header"
+    "menu main"
+    "footer footer";
 }
 
 header {
@@ -14,7 +13,7 @@ header {
   margin-top: 2em;
   margin-left: 3em;
   margin-right: 3em;
-  grid-column: 1 / 3;
+  grid-area: header;
 }
 
 header a {
@@ -59,7 +58,7 @@ header h2 {
   margin: 2em 0 2em 3em;
   display: flex;
   flex-direction: column;
-  grid-column: 1;
+  grid-area: menu;
 }
 
 #header-links a {
@@ -74,13 +73,14 @@ header h2 {
 
 #main {
   margin: 2em 3em 5em 1em;
+  grid-area: main;
 }
 
 footer {
   background-color: #304B99;
   padding: 1em;
   padding-bottom: 0;
-  grid-column: 1/4;
+  grid-area: footer;
 }
 
 #buttons {