SHAUN HARRIS

src/styles.css

@@ -33,24 +33,83 @@
 
 /* Write CSS Below Here */
 /*
+
 1. Practice re-using classes
 2. You cannot add new classes (since the HTML must not be changed)
 3. You can make new selectors / combinators in this file though:
     https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors
 */
 
 .two-column-grid__expand-two {}
+.two-column-grid__expand-two {
+  display: grid;
+  gap: 10px;
 
 .three-column-grid {}
+  grid-template-columns: 200px 1fr;
+}
+
+.three-column-grid {
+  display: grid;
+  gap: 10px;
+
+  grid-template-columns: repeat(3, 1fr);
+}
+
+.three-column-grid__expand-two {
+  display: grid;
+  gap: 10px;
+
+  grid-template-columns: 50px 1fr 50px;
+}
+
+.five-column-grid {
+  display: grid;
+  gap: 10px;
+
+  grid-template-columns: repeat(5, 1fr);
+}
 
 .three-column-grid__expand-two {}
+.center-grid {
+  display: grid;
 
 .five-column-grid {}
+  place-items: center;
+}
 
 .center-grid {}
+.center-grid div{
+  width: 300px;
 
 .grid-in-grid-1 {}
+}
 
 .grid-in-grid-2 {}
+.grid-in-grid-1 {
+  display: grid;
+  gap: 10px;
+
+  grid-template-columns: 1fr 1fr;
+}
+
+.grid-in-grid-1 .box{
+  display: grid;
+  gap: 10px;
+
+  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
+}
+
+.grid-in-grid-2 {
+  display: grid;
+  gap: 10px;
+
+  grid-template-columns: 80px 1fr 200px;
+}
+
+.grid-in-grid-2 .box {
+  display: grid;
+  gap: 10px;
 
-.grid-madness {}
+  grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
+}