Masonry works pretty good

src/components/ProjectGrid.scss

@@ -1,26 +1,81 @@
 @import "~include-media/dist/_include-media.scss";
 
-$breakpoints: (phone: 320px, tablet: 768px, desktop: 1024px);
+$breakpoints: (x-small: 320px, small: 660px, medium: 900px, large: 1300px, x-large: 1560px);
 
-#project-grid {
+// Override Sass min()
-  display: grid;
+@function min($numbers...) {
+  @return m#{i}n(#{$numbers});
+}
+
+// Override Sass max()
+@function max($numbers...) {
+  @return m#{a}x(#{$numbers});
+}
 
+
+#project-grid {
   margin: 10px;
   background: #FFD43B;
   border-radius: 5px;
+  //padding: 10px;
 
+  @include media("<=x-small") {
+    .GridSizer, .OneByOne, .FourByOne {
+      width: 100%;
+    }
+  }
 
+  @include media(">x-small", "<small") {
+    .GridSizer, .OneByOne {
+      width: 49%;
+    }
+    .FourByOne {
+      width: 100%;
+    }
+  }
+
+  @include media(">=small", "<medium") {
+    .GridSizer, .OneByOne {
+      width: 32%;
+    }
+    .FourByOne {
+      width: 95%;
+    }
+  }
+
+  @include media(">=medium", "<large") {
+    .GridSizer, .OneByOne {
+      width: 24.5%;
+    }
+    .FourByOne {
+      width: 73%;
+    }
+  }
+
+  @include media(">=large", "<x-large") {
+    .GridSizer, .OneByOne {
+      max-width: 300px;
+      width: 19.5%;
+    }
+    .FourByOne {
+      width: 79.5%;
+      max-width: 1200px;
+    }
+  }
+
+  @include media(">=x-large") {
+    .GridSizer, .OneByOne {
+      width: 300px;
+    }
+    .FourByOne {
+      width: 1200px;
+    }
+  }
 
-  //@include media(">phone") {
-    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-    grid-gap: 5px;
-    justify-items: stretch;
-    align-items: stretch;
-  //}
 
 }
 
-.OneByOneGridElement {
+.OneByOne {
   display: flex;
   flex-direction: column;
   width: available;
@@ -36,7 +91,7 @@ $breakpoints: (phone: 320px, tablet: 768px, desktop: 1024px);
   }
 }
 
-.FourByOneGridElement {
+.FourByOne {
   grid-column: span 2;
   display: flex;
   flex-direction: row;

src/components/ProjectGrid.tsx

@@ -1,24 +1,47 @@
 import "./ProjectGrid.scss";
 import Masonry from "masonry-layout";
+import {useEffect} from "react";
 
+type GridElementImageProps = {
+    image_url: string;
+    image_alt: string;
+    title: string;
+    text: string;
+};
 
 type GridElementProps = {
     image_url: string;
     image_alt: string;
+    title: string;
     text: string;
 };
 
-const OneByOneGridElement = ({
+const OneWide = ({title, text}: GridElementProps) => {
+    return (
+        <div className={"OneByOne GridElement"}>
+            <div className={"title"}>
+                <h2>{title}</h2>
+            </div>
+            <div className={"description"}>
+                <p>{text}</p>
+            </div>
+        </div>
+    );
+};
+
+const OneWidePic = ({
                         image_url,
                         image_alt,
+                        title,
                         text,
-}: GridElementProps) => {
+                    }: GridElementImageProps) => {
     return (
-    <div className={"OneByOneGridElement"}>
+        <div className={"OneByOne GridElement"}>
             <div className={"image"}>
-        <img src={image_url} alt={image_alt} />
+                <img src={image_url} alt={image_alt}/>
             </div>
             <div className={"description"}>
+                <h2>{title}</h2>
                 <p>{text}</p>
             </div>
         </div>
@@ -28,14 +51,17 @@ const OneByOneGridElement = ({
 const FourByOneGridElement = ({
                                   image_url,
                                   image_alt,
+                                  title,
                                   text,
-}: GridElementProps) => {
+                              }: GridElementImageProps) => {
     return (
-    <div className={"FourByOneGridElement"}>
+        <div className={"FourByOne GridElement"}>
             <div className={"image"}>
-        <img src={image_url} alt={image_alt} />
+                <img src={image_url} alt={image_alt}/>
             </div>
             <div className={"description"}>
+                <h2>{title}</h2>
+
                 <p>{text}</p>
             </div>
         </div>
@@ -43,34 +69,50 @@ const FourByOneGridElement = ({
 };
 
 export const ProjectGrid = () => {
+    useEffect(() => {
+        var elem = document.querySelector("#project-grid");
 
+        // @ts-ignore
+        var msnry = new Masonry(elem, {
+            itemSelector: ".GridElement",
+            gutter: 5,
+            columnWidth: ".GridSizer",
+            percentPosition: true,
+        });
+    });
 
     return (
+        <div id={"project-grid-parent"}>
             <div id={"project-grid"}>
-      <OneByOneGridElement
+                <div className={"GridSizer"}/>
+                <OneWidePic
                     image_url={"http://jakecover.me/images/codedaysd.png"}
                     image_alt={"CodeDay San Diego Logo"}
+                    title={"CodeDay"}
                     text={
                         "CodeDay, an event by SRND, is a beginner-friendly 24 hour event for students that challenges\n attendees to create a game or an app."
                     }
                 />
-      <OneByOneGridElement
+                <OneWidePic
                     image_url={"http://jakecover.me/images/codedaysd.png"}
                     image_alt={"CodeDay San Diego Logo"}
+                    title={"CodeDay"}
                     text={
                         "CodeDay, an event by SRND, is a beginner-friendly 24 hour event for students that challenges\n attendees to create a game or an app."
                     }
                 />
-      <OneByOneGridElement
+                <OneWidePic
                     image_url={"http://jakecover.me/images/codedaysd.png"}
                     image_alt={"CodeDay San Diego Logo"}
+                    title={"CodeDay"}
                     text={
                         "CodeDay, an event by SRND, is a beginner-friendly 24 hour event for students that challenges\n attendees to create a game or an app."
                     }
                 />
-      <OneByOneGridElement
+                <OneWidePic
                     image_url={"http://jakecover.me/images/codedaysd.png"}
                     image_alt={"CodeDay San Diego Logo"}
+                    title={"CodeDay"}
                     text={
                         "CodeDay, an event by SRND, is a beginner-friendly 24 hour event for students that challenges\n attendees to create a game or an app."
                     }
@@ -78,10 +120,53 @@ export const ProjectGrid = () => {
                 <FourByOneGridElement
                     image_url={"http://jakecover.me/images/foresightsports.png"}
                     image_alt={"Foresight Sports Logo"}
+                    title={"Foresight Sports"}
                     text={
                         "Foresight Sports creates advanced augmented reality sports experiences. I created multiple games using Unity that took data from their launch monitor technology and translated it into a seamless experience."
                     }
                 />
+                <OneWidePic
+                    image_url={"http://jakecover.me/images/codedaysd.png"}
+                    image_alt={"CodeDay San Diego Logo"}
+                    title={"CodeDay"}
+                    text={
+                        "CodeDay, an event by SRND, is a beginner-friendly 24 hour event for students that challenges\n attendees to create a game or an app."
+                    }
+                />
+
+                <OneWidePic
+                    image_url={"http://jakecover.me/images/codedaysd.png"}
+                    image_alt={"CodeDay San Diego Logo"}
+                    title={"CodeDay"}
+                    text={
+                        "CodeDay, an event by SRND, is a beginner-friendly 24 hour event for students that challenges\n attendees to create a game or an app."
+                    }
+                />
+                <OneWidePic
+                    image_url={"http://jakecover.me/images/codedaysd.png"}
+                    image_alt={"CodeDay San Diego Logo"}
+                    title={"CodeDay"}
+                    text={
+                        "CodeDay, an event by SRND, is a beginner-friendly 24 hour event for students that challenges\n attendees to create a game or an app."
+                    }
+                />
+                <OneWidePic
+                    image_url={"http://jakecover.me/images/codedaysd.png"}
+                    image_alt={"CodeDay San Diego Logo"}
+                    title={"CodeDay"}
+                    text={
+                        "CodeDay, an event by SRND, is a beginner-friendly 24 hour event for students that challenges\n attendees to create a game or an app."
+                    }
+                />
+                <OneWidePic
+                    image_url={"http://jakecover.me/images/codedaysd.png"}
+                    image_alt={"CodeDay San Diego Logo"}
+                    title={"CodeDay"}
+                    text={
+                        "CodeDay, an event by SRND, is a beginner-friendly 24 hour event for students that challenges\n attendees to create a game or an app."
+                    }
+                />
+            </div>
         </div>
     );
 };

src/cusotmHooks.ts

@@ -0,0 +1,33 @@
+import {useEffect, useState} from "react";
+
+
+export function useWindowSize() {
+    // Initialize state with undefined width/height so server and client renders match
+    // Learn more here: https://joshwcomeau.com/react/the-perils-of-rehydration/
+    const [windowSize, setWindowSize] = useState({
+        width: 0,
+        height: 0,
+    });
+
+    useEffect(() => {
+        // Handler to call on window resize
+        function handleResize() {
+            // Set window width/height to state
+            setWindowSize({
+                width: window.innerWidth,
+                height: window.innerHeight,
+            });
+        }
+
+        // Add event listener
+        window.addEventListener("resize", handleResize);
+
+        // Call handler right away so state gets updated with initial window size
+        handleResize();
+
+        // Remove event listener on cleanup
+        return () => window.removeEventListener("resize", handleResize);
+    }, []); // Empty array ensures that effect is only run on mount
+
+    return windowSize;
+}