Placing and Spanning Grid Items.

Author: quechau

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;
@@ -46,14 +46,30 @@
         /* grid-template-columns: 1fr 1fr 1fr auto; */
 
         grid-template-columns: repeat(4, 1fr);
-        grid-template-rows: 1fr auto;
-        height: 500px;
+        grid-template-rows: 1fr 1fr;
+        /* height: 500px; */
 
         /* gap: 30px; */
-        column-gap: 10px;
+        column-gap: 20px;
         row-gap: 40px;
       }
 
+      .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;
+      }
+
+      .el--6 {
+        /* grid-row: 3 / 5; */
+      }
+
       .container--2 {
         display: none;
 
@@ -78,7 +94,7 @@
       <div class="el el--4">(4) are</div>
       <div class="el el--5">(5) amazing</div>
       <div class="el el--6">(6) languages</div>
-      <div class="el el--7">(7) to</div>
+      <!-- <div class="el el--7">(7) to</div> -->
       <div class="el el--8">(8) learn</div>
     </div>