diff --git a/pages/projects.tsx b/pages/projects.tsx
index 44cb34f..bceb701 100644
--- a/pages/projects.tsx
+++ b/pages/projects.tsx
@@ -53,7 +53,7 @@ function Projects({ projects, githubColors }: ProjectsProps): JSX.Element {
           {filteredProjects.length > 0 ? (
             filteredProjects.map((project, i) => {
               return (
-                <div className="col-4" key={project.name}>
+                <div className="project-grid-item" key={project.name}>
                   <ProjectCard
                     searchQuery={searchQuery}
                     project={project}
diff --git a/styles/globals.css b/styles/globals.css
index ba62ea6..f2b30de 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -177,6 +177,22 @@ body {
   transition: none;
 }
 
+.project-grid-item {
+  grid-column: span 4;
+}
+
+@media (max-width: 800px) {
+  .project-grid-item {
+    grid-column: span 6;
+  }
+}
+
+@media (max-width: 600px) {
+  .project-grid-item {
+    grid-column: span 12;
+  }
+}
+
 @media (max-width: 1160px) {
   #navbar #nav-container #hamburger {
     display: flex;