Defining columns and rows of css grid.

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;
@@ -36,17 +36,21 @@
                 /* STARTER */
                 font-family: sans-serif;
                 background-color: #ddd;
-                font-size: 40px;
+                font-size: 34px;
                 margin: 40px;
 
                 /* CSS GRID */
                 display: grid;
-                grid-template-columns: 240px 240px 120px 120px;
-                grid-template-rows: 300px 200px;
+                /* grid-template-columns: 1fr 1fr 1fr auto; */
+                grid-template-columns: repeat(4, 1fr);
+
+                /* grid-template-rows: 300px 200px; */
+                grid-template-rows: 1fr auto;
 
                 /* gap: 30px; */
-                column-gap: 30px;
-                row-gap: 60px;
+                column-gap: 10px;
+                row-gap: 30px;
+                height: 500px;
             }
 
             .container--2 {