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 {
-  display: grid;
+// Override Sass min()
+@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,87 +1,172 @@
 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;
-  text: string;
+    image_url: string;
+    image_alt: string;
+    title: string;
+    text: string;
+};
+
+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 OneByOneGridElement = ({
-  image_url,
-  image_alt,
-  text,
-}: GridElementProps) => {
-  return (
-    <div className={"OneByOneGridElement"}>
-      <div className={"image"}>
-        <img src={image_url} alt={image_alt} />
-      </div>
-      <div className={"description"}>
-        <p>{text}</p>
-      </div>
-    </div>
-  );
+const OneWidePic = ({
+                        image_url,
+                        image_alt,
+                        title,
+                        text,
+                    }: GridElementImageProps) => {
+    return (
+        <div className={"OneByOne GridElement"}>
+            <div className={"image"}>
+                <img src={image_url} alt={image_alt}/>
+            </div>
+            <div className={"description"}>
+                <h2>{title}</h2>
+                <p>{text}</p>
+            </div>
+        </div>
+    );
 };
 
 const FourByOneGridElement = ({
-  image_url,
-  image_alt,
-  text,
-}: GridElementProps) => {
-  return (
-    <div className={"FourByOneGridElement"}>
-      <div className={"image"}>
-        <img src={image_url} alt={image_alt} />
-      </div>
-      <div className={"description"}>
-        <p>{text}</p>
-      </div>
-    </div>
-  );
+                                  image_url,
+                                  image_alt,
+                                  title,
+                                  text,
+                              }: GridElementImageProps) => {
+    return (
+        <div className={"FourByOne GridElement"}>
+            <div className={"image"}>
+                <img src={image_url} alt={image_alt}/>
+            </div>
+            <div className={"description"}>
+                <h2>{title}</h2>
+
+                <p>{text}</p>
+            </div>
+        </div>
+    );
 };
 
 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"}>
+                <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."
+                    }
+                />
+                <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."
+                    }
+                />
+                <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."
+                    }
+                />
 
-  return (
-    <div id={"project-grid"}>
-      <OneByOneGridElement
-        image_url={"http://jakecover.me/images/codedaysd.png"}
-        image_alt={"CodeDay San Diego Logo"}
-        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
-        image_url={"http://jakecover.me/images/codedaysd.png"}
-        image_alt={"CodeDay San Diego Logo"}
-        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
-        image_url={"http://jakecover.me/images/codedaysd.png"}
-        image_alt={"CodeDay San Diego Logo"}
-        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
-        image_url={"http://jakecover.me/images/codedaysd.png"}
-        image_alt={"CodeDay San Diego Logo"}
-        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."
-        }
-      />
-      <FourByOneGridElement
-        image_url={"http://jakecover.me/images/foresightsports.png"}
-        image_alt={"Foresight Sports Logo"}
-        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."
-        }
-      />
-    </div>
-  );
+                <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;
+}