grid config

css/components/islandora_mods.css

@@ -115,13 +115,13 @@ button.tl-menubar-button {
 /* ============================================================
    COLLECTION GRID
    ============================================================ */
-@media (min-width: 700px) {
-  .collection-view .view-content {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    grid-gap: 1em;
-  }
-}
+/* @media (min-width: 700px) { */
+/*   .collection-view .view-content { */
+/*     display: grid; */
+/*     grid-template-columns: repeat(3, 1fr); */
+/*     grid-gap: 1em; */
+/*   } */
+/* } */
 .grid-item {
   border: 1px solid #ccc;
   padding: 8px;
@@ -187,6 +187,32 @@ button.tl-menubar-button {
   font-size: 0.9em;
 }
 
+.collection-view .view-content,
+.view-grid > .view-content {
+  display: grid;
+  grid-template-columns: 1fr; /* mobile: single column */
+}
+
+@media (min-width: 600px) {
+  .collection-view .view-content,
+  .view-grid > .view-content {
+    grid-template-columns: repeat(2, 1fr); /* tablet portrait: 2 across */
+  }
+}
+
+@media (min-width: 900px) {
+  .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-content,
+  .view-grid > .view-content {
+    grid-template-columns: repeat(4, 1fr); /* desktop: 4 across */
+  }
+}
 /* ============================================================
    FACETS
    ============================================================ */