section-4: CCS grid experimentations.

Author: owen-webb

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

@@ -11,10 +11,14 @@
       }
       .el--2 {
         background-color: orangered;
+        /* grid-column: 1 / 2; */
+        /* grid-column: 1 / -1; */
+        grid-column: 1 / span 1;
+        grid-row: 2 / 3;
       }
       .el--3 {
         background-color: green;
-        height: 150px;
+        /* height: 150px; */
       }
       .el--4 {
         background-color: goldenrod;
@@ -24,35 +28,64 @@
       }
       .el--6 {
         background-color: steelblue;
+        grid-column: 4 / span 1;
+        grid-row: 1 / span 2;
       }
       .el--7 {
         background-color: yellow;
       }
       .el--8 {
         background-color: crimson;
+        grid-column: 2 / 3;
+        grid-row: 1 / 2;
       }
 
       .container--1 {
         /* STARTER */
         font-family: sans-serif;
         background-color: #ddd;
-        font-size: 40px;
+        font-size: 32px;
         margin: 40px;
+        height: 500px;
 
         /* CSS GRID */
+        display: grid;
+        /* gap: 30px; */
+        column-gap: 10px;
+        row-gap: 40px;
+        /* grid-template-columns: 2fr 1fr 1fr auto; */
+        grid-template-columns: repeat(4, 1fr);
+        /* grid-template-rows: 300px 200px; */
+        grid-template-rows: 1fr 1fr;
       }
 
       .container--2 {
         /* 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: 10px;
+
+        /* Align tracks in container. Distribute empty space. */
+        justify-content: center;
+        align-content: center;
+
+        /* Align items inside cells. */
+        align-items: center;
+        justify-items: center;
+      }
+
+      .el--3 {
+        align-self: end;
       }
     </style>
   </head>