diff --git a/frontend/src/scss/_breakpoints.scss b/frontend/src/scss/_breakpoints.scss
new file mode 100644
index 0000000..2911933
--- /dev/null
+++ b/frontend/src/scss/_breakpoints.scss
@@ -0,0 +1,24 @@
+// Single source of truth for the grid breakpoints, shared between toolshed.scss
+// (which feeds them into Bootstrap's own grid/container generation) and any
+// component's <style lang="scss"> block that needs a matching media query
+// via media-breakpoint-up()/-down()/-between() (see mixins/_breakpoints.scss).
+//
+// Bootstrap 4 stops at xl; xxl is faked here for grid sizing until the
+// Bootstrap 5 upgrade brings a real one.
+$grid-breakpoints: (
+        xs: 0,
+        sm: 576px,
+        md: 768px,
+        lg: 992px,
+        xl: 1200px,
+        xxl: 3000px
+);
+$container-max-widths: (
+        sm: 540px,
+        md: 720px,
+        lg: 960px,
+        xl: 1140px,
+        xxl: 2960px
+);
+
+@import "bootstrap/scss/mixins/breakpoints";
diff --git a/frontend/src/scss/toolshed.scss b/frontend/src/scss/toolshed.scss
index cb8219e..5a41d97 100644
--- a/frontend/src/scss/toolshed.scss
+++ b/frontend/src/scss/toolshed.scss
@@ -27,6 +27,8 @@ $h4-font-size: $font-size-base * 1.25;
 $h5-font-size: $font-size-base;
 $h6-font-size: $font-size-base;
 
+@import "breakpoints";
+
 @import "bootstrap/scss/functions";
 @import "bootstrap/scss/variables";
 
diff --git a/frontend/src/views/Inventory.vue b/frontend/src/views/Inventory.vue
index dbc77b9..f8f35a7 100644
--- a/frontend/src/views/Inventory.vue
+++ b/frontend/src/views/Inventory.vue
@@ -121,7 +121,7 @@
                             </div>
                             <div class="card-body" v-else>
                                 <div class="row">
-                                    <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2 d-flex" v-for="item in items"
+                                    <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2 col-xxl-1 d-flex" v-for="item in items"
                                          :key="item.id">
                                         <div class="card w-100 d-flex flex-column">
                                             <authenticated-image v-if="only_images(item.files).length > 0"
@@ -299,7 +299,9 @@ export default {
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+@import "../scss/breakpoints";
+
 .img-preview-grid {
     height: 160px;
     object-fit: cover;
@@ -325,24 +327,30 @@ export default {
     margin-bottom: 1rem;
 }
 
-@media (min-width: 768px) {
+@include media-breakpoint-up(md) {
     .masonry-grid {
         column-count: 3;
     }
 }
 
-@media (min-width: 992px) {
+@include media-breakpoint-up(lg) {
     .masonry-grid {
         column-count: 4;
     }
 }
 
-@media (min-width: 1200px) {
+@include media-breakpoint-up(xl) {
     .masonry-grid {
         column-count: 6;
     }
 }
 
+@include media-breakpoint-up(xxl) {
+    .masonry-grid {
+        column-count: 12;
+    }
+}
+
 .unguarded.btn-danger,
 .unguarded.btn-danger:hover,
 .unguarded.btn-danger:focus {
diff --git a/frontend/src/views/StorageLocation.vue b/frontend/src/views/StorageLocation.vue
index 5163636..3f95356 100644
--- a/frontend/src/views/StorageLocation.vue
+++ b/frontend/src/views/StorageLocation.vue
@@ -112,7 +112,7 @@
                             </div>
                             <div class="card-body" v-else>
                                 <div class="row">
-                                    <div class="col-12 col-md-4 col-lg-3 col-xl-2 d-flex" v-for="location in locations"
+                                    <div class="col-12 col-md-4 col-lg-3 col-xl-2 col-xxl-1 d-flex" v-for="location in locations"
                                          :key="location.id">
                                         <div class="card w-100 d-flex flex-column">
                                             <div class="card-body d-flex flex-column flex-grow-1">