Changed alignment of css grid tracks, as well as grid items inside their cells.

Author: mirmak4

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

@@ -51,6 +51,8 @@
                 column-gap: 20px;
                 row-gap: 30px;
                 /* height: 500px; */
+
+                display: none;
             }
 
             .el--8 {
@@ -73,18 +75,39 @@
             } */
 
             .container--2 {
-                display: none;
+                /* 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
+                distributing 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>