Completed exercise 03

03-grid-layout-3/style.css

@@ -5,6 +5,15 @@
 
 .container {
   text-align: center;
+  display: grid;
+  grid-template-columns: 1fr 4fr;
+  grid-template-rows: ;
+  gap: 4px;
+  grid-template-areas:
+  "header header"
+  "sidebar nav"
+  "sidebar article"
+  "footer footer";
 }
 
 .container div {
@@ -17,6 +26,20 @@
 
 .header {
   background-color: #393f4d;
+  grid-area: header;
+  display: grid;
+  grid-template-columns: 1fr 2fr;
+  align-items: center;
+}
+
+.logo {
+  justify-self: start;
+}
+
+.menu ul {
+  display: grid;
+  list-style: none;
+  grid-template-columns: repeat(4, 1fr);
 }
 
 .menu ul,
@@ -26,6 +49,9 @@
 
 .sidebar {
   background-color: #C50208;
+  grid-area: sidebar;
+  display: grid;
+  gap: 50px;
 }
 
 .sidebar .photo {
@@ -44,8 +70,22 @@
   font-weight: normal;
 }
 
+.sidebar > * {
+
+  align-items: center;
+  display: grid;
+}
+
 .nav {
   background-color: #C50208;
+  grid-area: nav;
+}
+
+.nav ul {
+  display: grid;
+  /* gap: 50px; */
+  list-style: none;
+  grid-template-columns: repeat(3, 1fr);
 }
 
 .nav ul li {
@@ -55,6 +95,11 @@
 
 .article {
   background-color: #bccbde;
+  grid-area: article;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 15px;
+  grid-auto-rows: 230px;
 }
 
 .article p {
@@ -62,12 +107,16 @@
   font-family: sans-serif;
   color: white;
   text-align: left;
+  margin: 0 0 10px 0;
 }
 
 .article .card {
   background-color: #FFFFFF;
   color: black;
   text-align: center;
+  /* padding: 20px; */
+  /* box-sizing: border-box; */
+  height: 200px;
 }
 
 .card p {
@@ -82,6 +131,7 @@
 }
 
 .footer {
+  grid-area: footer;
   background-color: #393f4d;
 }