diff --git a/css/components/islandora_mods.css b/css/components/islandora_mods.css
index c79204f..c00cf35 100755
--- a/css/components/islandora_mods.css
+++ b/css/components/islandora_mods.css
@@ -25,10 +25,39 @@ div#site-header__inner {
 /* ==========================================================================
    Grid / Views
    ========================================================================== */
+.collection-view.view-grid > .view-content,
+.collection-view .view-content,
 .view-grid > .view-content {
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  /* margin: 0.47214rem 0 0.47214rem 2.61803rem; */
+  grid-template-columns: 1fr; /* mobile: single column */
+}
+
+@media (min-width: 600px) {
+  .collection-view.view-grid > .view-content,
+  .collection-view .view-content,
+  .view-grid > .view-content {
+    grid-template-columns: repeat(2, 1fr); /* tablet portrait: 2 across */
+  }
+
+  .grid-item .grid-item__image {
+    height: initial;
+  }
+}
+
+@media (min-width: 900px) {
+  .collection-view.view-grid > .view-content,
+  .collection-view .view-content,
+  .view-grid > .view-content {
+    grid-template-columns: repeat(3, 1fr); /* tablet landscape: 3 across */
+  }
+}
+
+@media (min-width: 1200px) {
+  .collection-view.view-grid > .view-content,
+  .collection-view .view-content,
+  .view-grid > .view-content {
+    grid-template-columns: repeat(4, 1fr); /* desktop: 4 across */
+  }
 }
 .grid-item {
   border: 1px solid #ccc;