at video 63

Author: Dhruv Mohindru

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

@@ -41,12 +41,34 @@
 
         /* CSS GRID */
         display: grid;
-        grid-template-columns: 200px 200px 100px 100px;
-        grid-template-rows: 300px 200px;
+        /* grid-template-columns: 200px 200px 1fr 1fr; */
+        /* grid-template-columns: 1fr 1fr 1fr 1fr; */
+        /* grid-template-rows: 300px 200px; */
+        grid-template-columns: repeat(4, 1fr);
+        grid-template-rows: 1fr 1fr;
+        /* height: 500px; */
 
         /* gap: 30px; */
-        column-gap: 30px;
-        row-gap: 60px;
+        column-gap: 20px;
+        row-gap: 40px;
+      }
+
+      .el--8 {
+        grid-column: 2 / 3;
+        /* grid-row: 1 / span 2; */
+        grid-row: 1 / 2;
+      }
+
+      .el--2 {
+        /* grid-column: 1 / 4; */
+        /* grid-column: 1 / span 4; */
+        /* grid-column: 2 / -1; */
+        grid-column: 1 / -1;
+        grid-row: 2;
+      }
+
+      .el--6 {
+        /* grid-row: 3 / 4; */
       }
 
       .container--2 {
@@ -73,7 +95,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>