diff --git a/webapp/components/MasonryGrid/MasonryGrid.vue b/webapp/components/MasonryGrid/MasonryGrid.vue
index d6ab6c140..c27f134e8 100644
--- a/webapp/components/MasonryGrid/MasonryGrid.vue
+++ b/webapp/components/MasonryGrid/MasonryGrid.vue
@@ -16,24 +16,9 @@ export default {
       itemsCalculating: 0,
     }
   },
-  computed: {
-    rowHeight() {
-      if (this.$el) {
-        return parseInt(this.$el.style.gridAutoRows)
-      }
-      return 0
-    },
-    rowGap() {
-      if (this.$el) {
-        return parseInt(this.$el.style.gridRowGap)
-      }
-      return 0
-    },
-  },
   methods: {
     startCalculation() {
       this.itemsCalculating += 1
-      return { rowHeight: this.rowHeight, rowGap: this.rowGap }
     },
     endCalculation() {
       this.itemsCalculating -= 1
diff --git a/webapp/components/MasonryGrid/MasonryGridItem.vue b/webapp/components/MasonryGrid/MasonryGridItem.vue
index 07ffc094a..4533a5f11 100644
--- a/webapp/components/MasonryGrid/MasonryGridItem.vue
+++ b/webapp/components/MasonryGrid/MasonryGridItem.vue
@@ -13,14 +13,14 @@ export default {
   },
   methods: {
     calculateItemHeight() {
-      const grid = this.$parent.$emit('calculating-item-height')
+      this.$parent.$emit('calculating-item-height')
       this.$nextTick(() => {
+        const grid = this.$parent
         const rowHeight = parseInt(grid.$el.style.gridAutoRows)
         const rowGap = parseInt(grid.$el.style.gridRowGap)
-
         const itemHeight = this.$el.clientHeight
-        const rowSpan = Math.ceil((itemHeight + rowGap) / (rowHeight + rowGap))
-        this.rowSpan = rowSpan
+
+        this.rowSpan = Math.ceil((itemHeight + rowGap) / (rowHeight + rowGap))
         this.$parent.$emit('finished-calculating-item-height')
       })
     },
@@ -30,6 +30,7 @@ export default {
     if (image) {
       image.onload = () => this.calculateItemHeight()
     } else {
+      // use timeout to make sure layout is set up before calculation
       setTimeout(() => this.calculateItemHeight(), 0)
     }
   },