Aligning Grid Items and Tracks.

Author: quechau

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

@@ -52,6 +52,7 @@
         /* gap: 30px; */
         column-gap: 20px;
         row-gap: 40px;
+        display: none;
       }
 
       .el--8 {
@@ -71,18 +72,34 @@
       }
 
       .container--2 {
-        display: none;
-
         /* STARTER */
         font-family: sans-serif;
         background-color: black;
         font-size: 40px;
-        margin: 100px;
+        margin: 40px;
 
-        width: 1000px;
+        width: 700px;
         height: 600px;
 
         /* CSS GRID */
+        display: grid;
+        grid-template-columns: 125px 200px 125px;
+        grid-template-rows: 250px 100px;
+        gap: 50px;
+
+        /* Aligning tracks inside container: distribute empty space */
+        justify-content: center;
+        /* justify-content: space-between; */
+        align-content: center;
+
+        /* Aligning items INSIDE cells: moving items around inside cells */
+        align-items: end;
+        justify-items: end;
+      }
+
+      .el--3 {
+        align-self: center;
+        justify-self: center;
       }
     </style>
   </head>