grid columns and rows

Author: rameskum

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

@@ -15,7 +15,7 @@
 
 		.el--3 {
 			background-color: green;
-			/*height: 150px;*/
+			height: 150px;
 		}
 
 		.el--4 {
@@ -50,12 +50,27 @@
 			/*grid-template-columns: 1fr 1fr 1fr auto;*/
 			grid-template-columns: repeat(4, 1fr);
 			/*grid-template-rows: 300px 200px;*/
-			grid-template-rows: 1fr auto;
+			grid-template-rows: 1fr 1fr;
 
 			/*gap: 10px;*/
-			column-gap: 10px;
-			row-gap: 20px;
-			height: 500px;
+			column-gap: 20px;
+			row-gap: 30px;
+		}
+
+		.el--8 {
+			grid-column: 2 / 3;
+			grid-row: 1;
+		}
+
+		.el--2 {
+			/*grid-column: 1 / 4;*/
+			/*grid-column: 1 / span 4;*/
+			grid-column: 1 / -1; /* span all the way to end */
+			grid-row: 2;
+		}
+
+		.el--6 {
+			grid-row: 3 / 6;
 		}
 
 		.container--2 {
@@ -82,7 +97,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&#45;&#45;7">(7) to</div>-->
 	<div class="el el--8">(8) learn</div>
 </div>