Hamza Ahmed

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "liveServer.settings.port": 5503
+}

src/styles.css

@@ -39,18 +39,118 @@
     https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors
 */
 
-.two-column-grid__expand-two {}
+.container.two-column-grid__expand-two {
+  display: grid;
+  grid-template-columns: 2fr 9fr;
+  gap: 5px;
+}
+.logo {
+  border: dotted 2px lightgreen;
+}
 
-.three-column-grid {}
+.container.three-column-grid {
+  display: grid;
+  grid-template-columns: 3fr 3fr 3fr;
+  gap: 5px;
+}
 
-.three-column-grid__expand-two {}
+.container.three-column-grid__expand-two {
+  display: grid;
+  grid-template-columns: 1fr 25fr 1fr;
+  gap: 5px;
+}
+.container.five-column-grid {
+  display: grid;
+  grid-template:
+    "box1 box2 box3 box4 box5" 1fr /
+    1fr 1fr 1fr 1fr 1fr;
+  gap: 5px;
+}
+/* .test {
+display: grid;
+grid-template-columns: 1fr;
+grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
+grid-template-areas: "box1 box2 box3 box4 box5";
+} */
+.container.five-column-grid > box {
+  grid-area: box1;
+}
+.container.five-column-grid > box {
+  grid-area: box2;
+}
+.container.five-column-grid > box {
+  grid-area: box3;
+}
+.container.five-column-grid > box {
+  grid-area: box4;
+}
+.container.five-column-grid > box {
+  grid-area: box5;
+}
 
-.five-column-grid {}
+.container.center-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: 1fr;
+  align-items: center;
+  justify-items: center;
+}
+.centered {
+  width: 300px;
+}
 
-.center-grid {}
+.container.grid-in-grid-1 {
+  display: grid;
+  grid-template-rows: 1fr;
+  grid-template-columns: 1fr 1fr;
+  grid-template-areas: "leftredbox rightredbox";
+  gap: 5px;
+}
 
-.grid-in-grid-1 {}
+.container.grid-in-grid-1 > .box:first-child {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 5px;
+}
 
-.grid-in-grid-2 {}
+.container.grid-in-grid-1 > .box:nth-child(2) {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+  gap: 5px;
+}
 
-.grid-madness {}
+.container.two-column-grid > .box:first-child /*choosing the first div that has same name as div*/ {
+  display: grid;
+  grid-template-rows: 1fr;
+  grid-template-columns: 1fr 1fr 1fr;
+  grid-template-areas: greenbox1 greenbox2 greenbox3;
+  gap: 5px;
+}
+.container.two-column-grid > .box:nth-child(2) /*choosing a type of box within the container (second one in this case)*/ {
+  display: grid;
+  grid-template-rows: 1fr;
+  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+  grid-template-areas: 2greenbox1 2greenbox2 2greenbox3;
+  gap: 5px;
+}
+.container {
+  display: grid;
+  grid-template-rows: 1fr;
+  grid-template-columns: 1fr 15fr 2.5fr;
+  grid-template-areas: "leftred middlered rightred";
+  gap: 5px;
+}
+.container > .box:first-child {
+  display: grid;
+  grid-template-rows: 1fr;
+  grid-template-columns: 1fr;
+  grid-template-areas: "leftgreenbox";
+  gap: 5px;
+}
+.container > .box:nth-child(3) {
+  display: grid;
+  grid-template-rows: 1fr;
+  grid-template-columns: 1fr 1fr 1fr;
+  grid-template-areas: "rightgreenbox1 rightgreenbox1 rightgreenbox1";
+  gap: 5px;
+}