Added: up to 4.63 Aligning Grid Items and Tracks

Author: JaviEstacio

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

@@ -14,7 +14,7 @@
       }
       .el--3 {
         background-color: green;
-        /* height: 150px; */
+        height: 150px;
       }
       .el--4 {
         background-color: goldenrod;
@@ -33,37 +33,74 @@
       }
 
       .container--1 {
+        display: none;
         /* STARTER */
         font-family: sans-serif;
         background-color: #ddd;
         font-size: 30px;
         margin: 40px;
 
         /* CSS GRID */
-        display: grid;
+        /* display: grid; */
         /* grid-template-columns: 1fr 1fr 1fr auto; */
         /* grid-template-rows: 300px 200px; */
         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; */
+        grid-row: 1 / 2;
+      }
+
+      .el--2 {
+        /* grid-column: 1 / span 1;
+        grid-row: 2; */
+        /* grid-column: 1 / -1; */
+        /* grid-row: 2; */
+      }
+
+      .el--6 {
+        /* grid-row: 3 / 5; */
+      }
+
       .container--2 {
-        display: none;
+        /* display: none; */
         /* STARTER */
         font-family: sans-serif;
         background-color: black;
         font-size: 40px;
-        margin: 100px;
+        margin: 40px;
 
-        width: 1000px;
+        width: 700px;
         height: 600px;
 
         /* CSS GRID */
+        display: grid;
+        grid-template-columns: 125px 200px 125px;
+        grid-template-rows: 250px 100px;
+
+        gap: 50px;
+
+        /* Aligning tracks inside container: distribute empty space */
+        justify-content: center;
+        /* justify-content: space-between; */
+        align-content: center;
+
+        /* Aligning items INSIDE cells: moving items around inside cells*/
+        align-items: end;
+        justify-items: end;
+      }
+
+      .el--3 {
+        align-self: center;
+        justify-self: center;
       }
     </style>
   </head>
@@ -75,7 +112,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>