feat: aligning grid items and tracks

Author: Uribouz

starter/04-CSS-Layouts/css-grid.html

@@ -70,6 +70,7 @@
         row-gap: 40px;
         /* Set the proper container height */
         /* height: 500px; */
+        display: none;
       }
 
       .el--8 {
@@ -97,7 +98,6 @@
       }
 
       .container--2 {
-        display: none;
         /* STARTER */
         font-family: sans-serif;
         background-color: black;
@@ -108,6 +108,24 @@
         height: 600px;
 
         /* CSS GRID */
+        display: grid;
+        grid-template-columns: 125px 200px 125px;
+        grid-template-rows: 250px 100px;
+        gap: 50px;
+        /* Aligning tracks inside container */
+        justify-content: center;
+        /* justify-content: space-between; */
+        align-content: center;
+
+        /* Aligning items inside grid cells */
+        align-items: center;
+        justify-items: center;
+      }
+
+      /* Override align-tem and justify-items properties from parent's container */
+      .el--3 {
+        align-self: end;
+        justify-self: end;
       }
     </style>
   </head>