diff --git a/webapp/components/MasonryGrid/MasonryGridItem.vue b/webapp/components/MasonryGrid/MasonryGridItem.vue
index 91fb8a1d8..937da8f1f 100644
--- a/webapp/components/MasonryGrid/MasonryGridItem.vue
+++ b/webapp/components/MasonryGrid/MasonryGridItem.vue
@@ -5,17 +5,6 @@
 </template>
 
 <script>
-const landscapeRatio = 1.3
-const squareRatio = 1
-const portraitRatio = 0.7
-
-const getRowSpan = aspectRatio => {
-  if (aspectRatio >= landscapeRatio) return 13
-  else if (aspectRatio >= squareRatio) return 15
-  else if (aspectRatio >= portraitRatio) return 18
-  else return 25
-}
-
 export default {
   props: {
     imageAspectRatio: {
@@ -25,7 +14,7 @@ export default {
   },
   data() {
     return {
-      rowSpan: this.imageAspectRatio ? getRowSpan(this.imageAspectRatio) : 8,
+      rowSpan: 10,
     }
   },
   methods: {
@@ -45,7 +34,13 @@ export default {
     },
   },
   mounted() {
-    this.calculateItemHeight()
+    const image = this.$el.querySelector('img')
+    if (image) {
+      image.onload = () => this.calculateItemHeight()
+    } else {
+      // use timeout to make sure layout is set up before calculation
+      setTimeout(() => this.calculateItemHeight(), 0)
+    }
   },
 }
 </script>
diff --git a/webapp/components/PostCard/PostCard.vue b/webapp/components/PostCard/PostCard.vue
index 79ba9e8f0..60444c816 100644
--- a/webapp/components/PostCard/PostCard.vue
+++ b/webapp/components/PostCard/PostCard.vue
@@ -141,15 +141,6 @@ export default {
       this.$emit('unpinPost', post)
     },
   },
-  mounted() {
-    const width = this.$el.offsetWidth
-    const height = Math.min(width / this.post.imageAspectRatio, 2000)
-    const imageElement = this.$el.querySelector('.ds-card-image')
-
-    if (imageElement) {
-      imageElement.style.height = `${height}px`
-    }
-  },
 }
 </script>
 
diff --git a/webapp/pages/index.vue b/webapp/pages/index.vue
index 3cd669bfe..723232a2f 100644
--- a/webapp/pages/index.vue
+++ b/webapp/pages/index.vue
@@ -21,13 +21,10 @@
         </div>
       </ds-grid-item>
       <template v-if="hasResults">
-        <masonry-grid-item
-          v-for="post in posts"
-          :key="post.id"
-          :imageAspectRatio="post.imageAspectRatio"
-        >
+        <masonry-grid-item v-for="post in posts" :key="post.id">
           <hc-post-card
             :post="post"
+            :width="{ base: '100%', xs: '100%', md: '50%', xl: '33%' }"
             @removePostFromList="deletePost"
             @pinPost="pinPost"
             @unpinPost="unpinPost"
diff --git a/webapp/pages/post/_id/_slug/more-info.vue b/webapp/pages/post/_id/_slug/more-info.vue
index 2297800a2..fa690c354 100644
--- a/webapp/pages/post/_id/_slug/more-info.vue
+++ b/webapp/pages/post/_id/_slug/more-info.vue
@@ -19,11 +19,7 @@
     <h3>{{ $t('post.moreInfo.titleOfRelatedContributionsSection') }}</h3>
     <ds-section>
       <masonry-grid v-if="post.relatedContributions && post.relatedContributions.length">
-        <masonry-grid-item
-          v-for="relatedPost in post.relatedContributions"
-          :key="relatedPost.id"
-          :imageAspectRatio="relatedPost.imageAspectRatio"
-        >
+        <masonry-grid-item v-for="relatedPost in post.relatedContributions" :key="relatedPost.id">
           <hc-post-card
             :post="relatedPost"
             :width="{ base: '100%', lg: 1 }"
diff --git a/webapp/pages/profile/_id/_slug.vue b/webapp/pages/profile/_id/_slug.vue
index b343b018e..fd38aaf2c 100644
--- a/webapp/pages/profile/_id/_slug.vue
+++ b/webapp/pages/profile/_id/_slug.vue
@@ -232,11 +232,7 @@
           </ds-grid-item>
 
           <template v-if="posts.length">
-            <masonry-grid-item
-              v-for="post in posts"
-              :key="post.id"
-              :imageAspectRatio="post.imageAspectRatio"
-            >
+            <masonry-grid-item v-for="post in posts" :key="post.id">
               <hc-post-card
                 :post="post"
                 :width="{ base: '100%', md: '100%', xl: '50%' }"