Changed css grid layout using grid-row and grid-column properties on grid items.

Author: mirmak4

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

@@ -14,7 +14,7 @@
             }
             .el--3 {
                 background-color: green;
-                /* height: 150px; */
+                height: 150px;
             }
             .el--4 {
                 background-color: goldenrod;
@@ -45,14 +45,33 @@
                 grid-template-columns: repeat(4, 1fr);
 
                 /* grid-template-rows: 300px 200px; */
-                grid-template-rows: 1fr auto;
+                grid-template-rows: 1fr 1fr;
 
                 /* gap: 30px; */
-                column-gap: 10px;
+                column-gap: 20px;
                 row-gap: 30px;
-                height: 500px;
+                /* height: 500px; */
             }
 
+            .el--8 {
+                grid-column: 2 / 3;
+                grid-row: 1 / span 3;
+            }
+
+            .el--2 {
+                /* grid-column: 1 / 4; */
+                /* grid-column: 1 / span 4; */
+                /* grid-column: 1 / -1; */
+                grid-row: 2;
+                grid-column: 1 / -1;
+            }
+
+            /* .el--7 {
+                grid-row: 2;
+                grid-column: 1 / -1;
+                opacity: 0.5;
+            } */
+
             .container--2 {
                 display: none;