feat: placing and spanning grid items.

Author: Uribouz

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

@@ -63,12 +63,37 @@
         2) first row will the leftover height "1fr", 
             which will filled the entire container.
         */
-        grid-template-rows: 1fr auto;
+        /* grid-template-rows: 1fr auto; */
 
-        gap: 20px;
+        /* gap: 20px; */
         column-gap: 30px;
-        row-gap: 60px;
-        height: 500px;
+        row-gap: 40px;
+        /* Set the proper container height */
+        /* height: 500px; */
+      }
+
+      .el--8 {
+        grid-column: 2/3;
+        /* Span to other rows */
+        grid-row: 1 / span 2;
+        grid-row: 1/3;
+      }
+
+      .el--2 {
+        /* Same as  1 / span 3 */
+        /* grid-column: 1/4; */
+        /* grid-column: 1 / span 3; */
+
+        /* Span 4 columns */
+        /* grid-column: 1 / span 4; */
+
+        /* Span until the end of the grid */
+        grid-column: 1 / -1;
+        grid-row: 2;
+      }
+
+      .el--6 {
+        /* grid-row: 3 / 6; */
       }
 
       .container--2 {
@@ -94,7 +119,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>