diff --git a/modules/masonry/ext.isekai.masonry.base.js b/modules/masonry/ext.isekai.masonry.base.js
index fe9ca8e..7d8aa56 100644
--- a/modules/masonry/ext.isekai.masonry.base.js
+++ b/modules/masonry/ext.isekai.masonry.base.js
@@ -1,9 +1,38 @@
+function debounce(func, wait, immediate) {
+    let timeout;
+    return function () {
+        let context = this;
+        let args = arguments;
+        let later = function () {
+            timeout = null;
+            if (!immediate) {
+                func.apply(context, args);
+            }
+        };
+        let callNow = immediate && !timeout;
+        clearTimeout(timeout);
+        timeout = setTimeout(later, wait);
+        if (callNow) {
+            func.apply(context, args);
+        }
+    };
+}
+
 $(function () {
-    console.log('IsekaiWidgets: Masonry extension loaded');
-    new isekai.lib.Masonry('.isekai-masonry', {
+    let masonry = new isekai.lib.Masonry('.isekai-masonry', {
         itemSelector: '.isekai-masonry-item',
         columnWidth: '.isekai-masonry-sizer',
         gutter: '.isekai-masonry-gutter-sizer',
         percentPosition: true
     });
+
+    let resizeObserver = new ResizeObserver(debounce(function () {
+        console.log('masonry resize');
+        masonry.layout();
+    }, 100));
+
+    let items = document.querySelectorAll('.isekai-masonry-item');
+    items.forEach(function (item) {
+        resizeObserver.observe(item);
+    });
 });
\ No newline at end of file
diff --git a/modules/masonry/ext.isekai.masonry.less b/modules/masonry/ext.isekai.masonry.less
index 77409e9..a5b483f 100644
--- a/modules/masonry/ext.isekai.masonry.less
+++ b/modules/masonry/ext.isekai.masonry.less
@@ -13,6 +13,10 @@
         width: ~"calc(var(--masonry-col-width) - var(--masonry-gutter) - 1px)";
     }
 
+    .isekai-masonry-item {
+        margin-bottom: ~"var(--masonry-gutter)";
+    }
+
     // Column width tools
     .col-1 {
         width: 100%; // Fallback