diff --git a/addons/website/__manifest__.py b/addons/website/__manifest__.py
index 789e297edc5..7770777f606 100644
--- a/addons/website/__manifest__.py
+++ b/addons/website/__manifest__.py
@@ -174,6 +174,7 @@
             'website/static/src/snippets/s_facebook_page/options.js',
             'website/static/src/snippets/s_image_gallery/options.js',
             'website/static/src/snippets/s_countdown/options.js',
+            'website/static/src/snippets/s_masonry_block/options.js',
             'website/static/src/snippets/s_popup/options.js',
             'website/static/src/snippets/s_product_catalog/options.js',
             'website/static/src/snippets/s_chart/options.js',
diff --git a/addons/website/data/website_data.xml b/addons/website/data/website_data.xml
index 5f4b5b2ad44..4e614ee14f7 100644
--- a/addons/website/data/website_data.xml
+++ b/addons/website/data/website_data.xml
@@ -776,6 +776,12 @@
             <field name="type">url</field>
             <field name="url">/website/static/src/img/snippets_demo/s_masonry_block_1.jpg</field>
         </record>
+        <record id="website.s_masonry_block_default_image_2" model="ir.attachment">
+            <field name="public" eval="True"/>
+            <field name="name">s_masonry_block_default_image_2.jpg</field>
+            <field name="type">url</field>
+            <field name="url">/website/static/src/img/snippets_demo/s_cover.jpg</field>
+        </record>
         <record id="website.s_media_list_default_image_1" model="ir.attachment">
             <field name="public" eval="True"/>
             <field name="name">s_media_list_default_image_1.jpg</field>
diff --git a/addons/website/static/src/img/snippets_options/masonry_template_alternate_image_text.svg b/addons/website/static/src/img/snippets_options/masonry_template_alternate_image_text.svg
new file mode 100644
index 00000000000..57c4406d9f5
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/masonry_template_alternate_image_text.svg
@@ -0,0 +1,45 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="240" height="70" viewBox="0 0 240 70">
+    <defs>
+        <linearGradient id="s_masonry_gradient_1" gradientUnits="userSpaceOnUse" x1="82" y1="52" x2="75" y2="45">
+            <stop offset="0%" stop-color="#008374"/>
+            <stop offset="100%" stop-color="#006a59"/>
+        </linearGradient>
+        <linearGradient id="s_masonry_gradient_2" gradientUnits="userSpaceOnUse" x1="42" y1="42" x2="22" y2="55">
+            <stop offset="0%" stop-color="#00aa89"/>
+            <stop offset="100%" stop-color="#009989"/>
+        </linearGradient>
+    </defs>
+    <!-- Background -->
+    <rect x="0" y="5" width="240" height="60" fill="#9ccde4"/>
+    <!-- Image -->
+    <circle cx="45" cy="20" r="6" fill="#f3ed63"/>
+    <g transform="translate(-50, 0)">
+        <path fill="url(#s_masonry_gradient_1)" d="M75.2,50.2c-4.9,0-9.5,1-13.5,2.8c5.1,3.4,9.1,7.5,11.5,12.1h27.6C97.9,56.5,87.5,50.2,75.2,50.2z"/>
+        <path fill="url(#s_masonry_gradient_2)" d="M0,65.1h73.2c-6.7-12.9-25.8-22.2-48.5-22.2c-9,0-17.4,1.5-24.7,4C0,46.9,0,65.1,0,65.1z"/>
+    </g>
+
+    <!-- Text -->
+    <rect x="60" y="5" width="60" height="60" fill="#ffffff"/>
+    <rect x="75" y="30" width="30" height="2" fill="#333333"/>
+    <rect x="75" y="35" width="30" height="1" fill="#777777"/>
+    <rect x="75" y="38" width="30" height="1" fill="#777777"/>
+    <rect x="75" y="41" width="20" height="1" fill="#777777"/>
+
+    <!-- Image -->
+    <circle cx="165" cy="20" r="6" fill="#f3ed63"/>
+    <mask id="o_masonry_mask_3">
+        <rect x="50" y="5" width="60" height="60" fill="#ffffff"/>
+    </mask>
+    <g transform="translate(70, 0)">
+        <path fill="url(#s_masonry_gradient_1)" d="M75.2,50.2c-4.9,0-9.5,1-13.5,2.8c5.1,3.4,9.1,7.5,11.5,12.1h27.6C97.9,56.5,87.5,50.2,75.2,50.2z"/>
+        <path mask="url(#o_masonry_mask_3)" fill="url(#s_masonry_gradient_2)" d="M0,65.1h73.2c-6.7-12.9-25.8-22.2-48.5-22.2c-9,0-17.4,1.5-24.7,4C0,46.9,0,65.1,0,65.1z"/>
+    </g>
+
+    <!-- Text -->
+    <rect x="180" y="5" width="60" height="60" fill="#ffffff"/>
+    <rect x="195" y="30" width="30" height="2" fill="#333333"/>
+    <rect x="195" y="35" width="30" height="1" fill="#777777"/>
+    <rect x="195" y="38" width="30" height="1" fill="#777777"/>
+    <rect x="195" y="41" width="20" height="1" fill="#777777"/>
+
+</svg>
diff --git a/addons/website/static/src/img/snippets_options/masonry_template_alternate_text_image.svg b/addons/website/static/src/img/snippets_options/masonry_template_alternate_text_image.svg
new file mode 100644
index 00000000000..3b96357e8ee
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/masonry_template_alternate_text_image.svg
@@ -0,0 +1,44 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="240" height="70" viewBox="0 0 240 70">
+    <defs>
+        <linearGradient id="s_masonry_gradient_1" gradientUnits="userSpaceOnUse" x1="82" y1="52" x2="75" y2="45">
+            <stop offset="0%" stop-color="#008374"/>
+            <stop offset="100%" stop-color="#006a59"/>
+        </linearGradient>
+        <linearGradient id="s_masonry_gradient_2" gradientUnits="userSpaceOnUse" x1="42" y1="42" x2="22" y2="55">
+            <stop offset="0%" stop-color="#00aa89"/>
+            <stop offset="100%" stop-color="#009989"/>
+        </linearGradient>
+    </defs>
+    <!-- Background -->
+    <rect x="0" y="5" width="240" height="60" fill="#9ccde4"/>
+    <!-- Text -->
+    <rect x="0" y="5" width="60" height="60" fill="#ffffff"/>
+    <rect x="15" y="30" width="30" height="2" fill="#333333"/>
+    <rect x="15" y="35" width="30" height="1" fill="#777777"/>
+    <rect x="15" y="38" width="30" height="1" fill="#777777"/>
+    <rect x="15" y="41" width="20" height="1" fill="#777777"/>
+    <!-- Image -->
+    <circle cx="105" cy="20" r="6" fill="#f3ed63"/>
+    <mask id="o_masonry_mask_1">
+        <rect x="50" y="5" width="60" height="60" fill="#ffffff"/>
+    </mask>
+    <g transform="translate(10, 0)">
+        <path fill="url(#s_masonry_gradient_1)" d="M75.2,50.2c-4.9,0-9.5,1-13.5,2.8c5.1,3.4,9.1,7.5,11.5,12.1h27.6C97.9,56.5,87.5,50.2,75.2,50.2z"/>
+        <path mask="url(#o_masonry_mask_1)" fill="url(#s_masonry_gradient_2)" d="M0,65.1h73.2c-6.7-12.9-25.8-22.2-48.5-22.2c-9,0-17.4,1.5-24.7,4C0,46.9,0,65.1,0,65.1z"/>
+    </g>
+    <!-- Text -->
+    <rect x="120" y="5" width="60" height="60" fill="#ffffff"/>
+    <rect x="135" y="30" width="30" height="2" fill="#333333"/>
+    <rect x="135" y="35" width="30" height="1" fill="#777777"/>
+    <rect x="135" y="38" width="30" height="1" fill="#777777"/>
+    <rect x="135" y="41" width="20" height="1" fill="#777777"/>
+    <!-- Image -->
+    <circle cx="225" cy="20" r="6" fill="#f3ed63"/>
+    <mask id="o_masonry_mask_2">
+        <rect x="50" y="5" width="60" height="60" fill="#ffffff"/>
+    </mask>
+    <g transform="translate(130, 0)">
+        <path fill="url(#s_masonry_gradient_1)" d="M75.2,50.2c-4.9,0-9.5,1-13.5,2.8c5.1,3.4,9.1,7.5,11.5,12.1h27.6C97.9,56.5,87.5,50.2,75.2,50.2z"/>
+        <path mask="url(#o_masonry_mask_2)" fill="url(#s_masonry_gradient_2)" d="M0,65.1h73.2c-6.7-12.9-25.8-22.2-48.5-22.2c-9,0-17.4,1.5-24.7,4C0,46.9,0,65.1,0,65.1z"/>
+    </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_options/masonry_template_alternate_text_image_text.svg b/addons/website/static/src/img/snippets_options/masonry_template_alternate_text_image_text.svg
new file mode 100644
index 00000000000..4a603044b80
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/masonry_template_alternate_text_image_text.svg
@@ -0,0 +1,29 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="240" height="70" viewBox="0 0 240 70">
+    <defs>
+        <linearGradient id="s_masonry_gradient_1" gradientUnits="userSpaceOnUse" x1="82" y1="52" x2="75" y2="45">
+            <stop offset="0%" stop-color="#008374"/>
+            <stop offset="100%" stop-color="#006a59"/>
+        </linearGradient>
+        <linearGradient id="s_masonry_gradient_2" gradientUnits="userSpaceOnUse" x1="42" y1="42" x2="22" y2="55">
+            <stop offset="0%" stop-color="#00aa89"/>
+            <stop offset="100%" stop-color="#009989"/>
+        </linearGradient>
+    </defs>
+    <!-- Text -->
+    <rect x="0" y="5" width="60" height="60" fill="#ffffff"/>
+    <rect x="15" y="30" width="30" height="2" fill="#333333"/>
+    <rect x="15" y="35" width="30" height="1" fill="#777777"/>
+    <rect x="15" y="38" width="30" height="1" fill="#777777"/>
+    <rect x="15" y="41" width="20" height="1" fill="#777777"/>
+    <!-- Image -->
+    <rect x="60" y="5" width="120" height="60" fill="#9ccde4"/>
+    <circle cx="160" cy="25" r="6" fill="#f3ed63"/>
+    <path fill="url(#s_masonry_gradient_1)" d="M75.2,50.2c-4.9,0-9.5,1-13.5,2.8c5.1,3.4,9.1,7.5,11.5,12.1h27.6C97.9,56.5,87.5,50.2,75.2,50.2z" transform="translate(60, 0)"/>
+    <path fill="url(#s_masonry_gradient_2)" d="M0,65.1h73.2c-6.7-12.9-25.8-22.2-48.5-22.2c-9,0-17.4,1.5-24.7,4C0,46.9,0,65.1,0,65.1z" transform="translate(60, 0)"/>
+    <!-- Text -->
+    <rect x="180" y="5" width="60" height="60" fill="#ffffff"/>
+    <rect x="195" y="30" width="30" height="2" fill="#333333"/>
+    <rect x="195" y="35" width="30" height="1" fill="#777777"/>
+    <rect x="195" y="38" width="30" height="1" fill="#777777"/>
+    <rect x="195" y="41" width="20" height="1" fill="#777777"/>
+</svg>
diff --git a/addons/website/static/src/img/snippets_options/masonry_template_alternate_texts.svg b/addons/website/static/src/img/snippets_options/masonry_template_alternate_texts.svg
new file mode 100644
index 00000000000..5911b6a50ba
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/masonry_template_alternate_texts.svg
@@ -0,0 +1,26 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="240" height="70" viewBox="0 0 240 70">
+    <!-- Text -->
+    <rect x="0" y="5" width="60" height="60" fill="#ffffff"/>
+    <rect x="15" y="30" width="30" height="2" fill="#333333"/>
+    <rect x="15" y="35" width="30" height="1" fill="#777777"/>
+    <rect x="15" y="38" width="30" height="1" fill="#777777"/>
+    <rect x="15" y="41" width="20" height="1" fill="#777777"/>
+    <!-- Text -->
+    <rect x="60" y="5" width="60" height="60" fill="#c9ecfc"/>
+    <rect x="75" y="30" width="30" height="2" fill="#333333"/>
+    <rect x="75" y="35" width="30" height="1" fill="#777777"/>
+    <rect x="75" y="38" width="30" height="1" fill="#777777"/>
+    <rect x="75" y="41" width="20" height="1" fill="#777777"/>
+    <!-- Text -->
+    <rect x="120" y="5" width="60" height="60" fill="#ffffff"/>
+    <rect x="135" y="30" width="30" height="2" fill="#333333"/>
+    <rect x="135" y="35" width="30" height="1" fill="#777777"/>
+    <rect x="135" y="38" width="30" height="1" fill="#777777"/>
+    <rect x="135" y="41" width="20" height="1" fill="#777777"/>
+    <!-- Text -->
+    <rect x="180" y="5" width="60" height="60" fill="#c9ecfc"/>
+    <rect x="195" y="30" width="30" height="2" fill="#333333"/>
+    <rect x="195" y="35" width="30" height="1" fill="#777777"/>
+    <rect x="195" y="38" width="30" height="1" fill="#777777"/>
+    <rect x="195" y="41" width="20" height="1" fill="#777777"/>
+</svg>
diff --git a/addons/website/static/src/img/snippets_options/masonry_template_default.svg b/addons/website/static/src/img/snippets_options/masonry_template_default.svg
new file mode 100644
index 00000000000..dafa27f6df5
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/masonry_template_default.svg
@@ -0,0 +1,37 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="240" height="70" viewBox="0 0 240 70">
+    <defs>
+        <linearGradient id="s_masonry_gradient_1" gradientUnits="userSpaceOnUse" x1="82" y1="52" x2="75" y2="45">
+            <stop offset="0%" stop-color="#008374"/>
+            <stop offset="100%" stop-color="#006a59"/>
+        </linearGradient>
+        <linearGradient id="s_masonry_gradient_2" gradientUnits="userSpaceOnUse" x1="42" y1="42" x2="22" y2="55">
+            <stop offset="0%" stop-color="#00aa89"/>
+            <stop offset="100%" stop-color="#009989"/>
+        </linearGradient>
+    </defs>
+    <!-- Image -->
+    <rect x="0" y="5" width="120" height="60" fill="#9ccde4"/>
+    <circle cx="105" cy="20" r="6" fill="#f3ed63"/>
+    <path fill="url(#s_masonry_gradient_1)" d="M75.2,50.2c-4.9,0-9.5,1-13.5,2.8c5.1,3.4,9.1,7.5,11.5,12.1h27.6C97.9,56.5,87.5,50.2,75.2,50.2z"/>
+    <path fill="url(#s_masonry_gradient_2)" d="M0,65.1h73.2c-6.7-12.9-25.8-22.2-48.5-22.2c-9,0-17.4,1.5-24.7,4C0,46.9,0,65.1,0,65.1z"/>
+    <!-- Background -->
+    <rect x="120" y="5" width="120" height="60" fill="#c9ecfc"/>
+    <!-- Text -->
+    <rect x="120" y="5" width="60" height="30" fill="#ffffff"/>
+    <rect x="135" y="16" width="30" height="2" fill="#222222"/>
+    <rect x="135" y="21" width="30" height="1" fill="#666666"/>
+    <rect x="135" y="24" width="20" height="1" fill="#666666"/>
+    <!-- Text -->
+    <rect x="135" y="46" width="30" height="2" fill="#222222"/>
+    <rect x="135" y="51" width="30" height="1" fill="#666666"/>
+    <rect x="135" y="54" width="20" height="1" fill="#666666"/>
+    <!-- Text -->
+    <rect x="195" y="16" width="30" height="2" fill="#333333"/>
+    <rect x="195" y="21" width="30" height="1" fill="#666666"/>
+    <rect x="195" y="24" width="20" height="1" fill="#666666"/>
+    <!-- Text -->
+    <rect x="180" y="35" width="60" height="30" fill="#ffffff"/>
+    <rect x="195" y="46" width="30" height="2" fill="#333333"/>
+    <rect x="195" y="51" width="30" height="1" fill="#666666"/>
+    <rect x="195" y="54" width="20" height="1" fill="#666666"/>
+</svg>
diff --git a/addons/website/static/src/img/snippets_options/masonry_template_image_texts_image.svg b/addons/website/static/src/img/snippets_options/masonry_template_image_texts_image.svg
new file mode 100644
index 00000000000..d5d29510504
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/masonry_template_image_texts_image.svg
@@ -0,0 +1,36 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="240" height="70" viewBox="0 0 240 70">
+    <defs>
+        <linearGradient id="s_masonry_gradient_1" gradientUnits="userSpaceOnUse" x1="82" y1="52" x2="75" y2="45">
+            <stop offset="0%" stop-color="#008374"/>
+            <stop offset="100%" stop-color="#006a59"/>
+        </linearGradient>
+        <linearGradient id="s_masonry_gradient_2" gradientUnits="userSpaceOnUse" x1="42" y1="42" x2="22" y2="55">
+            <stop offset="0%" stop-color="#00aa89"/>
+            <stop offset="100%" stop-color="#009989"/>
+        </linearGradient>
+    </defs>
+    <!-- Background -->
+    <rect x="0" y="5" width="240" height="60" fill="#9ccde4"/>
+    <!-- Image -->
+    <circle cx="45" cy="20" r="6" fill="#f3ed63"/>
+    <g transform="translate(-50, 0)">
+        <path fill="url(#s_masonry_gradient_1)" d="M75.2,50.2c-4.9,0-9.5,1-13.5,2.8c5.1,3.4,9.1,7.5,11.5,12.1h27.6C97.9,56.5,87.5,50.2,75.2,50.2z"/>
+        <path fill="url(#s_masonry_gradient_2)" d="M0,65.1h73.2c-6.7-12.9-25.8-22.2-48.5-22.2c-9,0-17.4,1.5-24.7,4C0,46.9,0,65.1,0,65.1z"/>
+    </g>
+    <!-- Text -->
+    <rect x="60" y="5" width="60" height="30" fill="#ffffff"/>
+    <rect x="75" y="16" width="30" height="2" fill="#333333"/>
+    <rect x="75" y="21" width="30" height="1" fill="#666666"/>
+    <rect x="75" y="24" width="20" height="1" fill="#666666"/>
+    <!-- Text -->
+    <rect x="60" y="35" width="60" height="30" fill="#c9ecfc"/>
+    <rect x="75" y="46" width="30" height="2" fill="#333333"/>
+    <rect x="75" y="51" width="30" height="1" fill="#666666"/>
+    <rect x="75" y="54" width="20" height="1" fill="#666666"/>
+    <!-- Image -->
+    <circle cx="225" cy="20" r="6" fill="#f3ed63"/>
+    <g transform="translate(120, 0)">
+        <path fill="url(#s_masonry_gradient_1)" d="M75.2,50.2c-4.9,0-9.5,1-13.5,2.8c5.1,3.4,9.1,7.5,11.5,12.1h27.6C97.9,56.5,87.5,50.2,75.2,50.2z"/>
+        <path fill="url(#s_masonry_gradient_2)" d="M0,65.1h73.2c-6.7-12.9-25.8-22.2-48.5-22.2c-9,0-17.4,1.5-24.7,4C0,46.9,0,65.1,0,65.1z"/>
+    </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_options/masonry_template_images.svg b/addons/website/static/src/img/snippets_options/masonry_template_images.svg
new file mode 100644
index 00000000000..7be2c0394a6
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/masonry_template_images.svg
@@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="240" height="70" viewBox="0 0 240 70">
+    <defs>
+        <linearGradient id="s_masonry_gradient_1" gradientUnits="userSpaceOnUse" x1="82" y1="52" x2="75" y2="45">
+            <stop offset="0%" stop-color="#008374"/>
+            <stop offset="100%" stop-color="#006a59"/>
+        </linearGradient>
+        <linearGradient id="s_masonry_gradient_2" gradientUnits="userSpaceOnUse" x1="42" y1="42" x2="22" y2="55">
+            <stop offset="0%" stop-color="#00aa89"/>
+            <stop offset="100%" stop-color="#009989"/>
+        </linearGradient>
+    </defs>
+    <!-- Background -->
+    <rect x="0" y="5" width="240" height="60" fill="#9ccde4"/>
+    <!-- Image -->
+    <circle cx="105" cy="20" r="6" fill="#f3ed63"/>
+    <path fill="url(#s_masonry_gradient_1)" d="M75.2,50.2c-4.9,0-9.5,1-13.5,2.8c5.1,3.4,9.1,7.5,11.5,12.1h27.6C97.9,56.5,87.5,50.2,75.2,50.2z"/>
+    <path fill="url(#s_masonry_gradient_2)" d="M0,65.1h73.2c-6.7-12.9-25.8-22.2-48.5-22.2c-9,0-17.4,1.5-24.7,4C0,46.9,0,65.1,0,65.1z"/>
+    <!-- Image -->
+    <circle cx="225" cy="20" r="6" fill="#f3ed63"/>
+    <path fill="url(#s_masonry_gradient_1)" d="M75.2,50.2c-4.9,0-9.5,1-13.5,2.8c5.1,3.4,9.1,7.5,11.5,12.1h27.6C97.9,56.5,87.5,50.2,75.2,50.2z" transform="translate(120, 0)"/>
+    <path fill="url(#s_masonry_gradient_2)" d="M0,65.1h73.2c-6.7-12.9-25.8-22.2-48.5-22.2c-9,0-17.4,1.5-24.7,4C0,46.9,0,65.1,0,65.1z" transform="translate(120, 0)"/>
+    <!-- Separator -->
+    <line x1="119" y1="5" x2="119" y2="65" stroke-width="2" stroke="#ffffff"/>
+</svg>
diff --git a/addons/website/static/src/img/snippets_options/masonry_template_mosaic.svg b/addons/website/static/src/img/snippets_options/masonry_template_mosaic.svg
new file mode 100644
index 00000000000..64c55638eb1
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/masonry_template_mosaic.svg
@@ -0,0 +1,55 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="240" height="70" viewBox="0 0 240 70">
+    <defs>
+        <linearGradient id="s_masonry_gradient_1" gradientUnits="userSpaceOnUse" x1="82" y1="52" x2="75" y2="45">
+            <stop offset="0%" stop-color="#008374"/>
+            <stop offset="100%" stop-color="#006a59"/>
+        </linearGradient>
+        <linearGradient id="s_masonry_gradient_2" gradientUnits="userSpaceOnUse" x1="42" y1="42" x2="22" y2="55">
+            <stop offset="0%" stop-color="#00aa89"/>
+            <stop offset="100%" stop-color="#009989"/>
+        </linearGradient>
+    </defs>
+    <!-- Background -->
+    <rect x="0" y="5" width="240" height="60" fill="#9ccde4"/>
+    <!-- Text -->
+    <rect x="0" y="5" width="60" height="30" fill="#c9ecfc"/>
+    <rect x="15" y="16" width="30" height="2" fill="#333333"/>
+    <rect x="15" y="21" width="30" height="1" fill="#666666"/>
+    <rect x="15" y="24" width="20" height="1" fill="#666666"/>
+    <!-- Text -->
+    <rect x="60" y="5" width="60" height="30" fill="#ffffff"/>
+    <rect x="75" y="16" width="30" height="2" fill="#333333"/>
+    <rect x="75" y="21" width="30" height="1" fill="#666666"/>
+    <rect x="75" y="24" width="20" height="1" fill="#666666"/>
+    <!-- Image -->
+    <circle cx="105" cy="48" r="6" fill="#f3ed63"/>
+    <mask id="s_masonry_mask_4">
+        <rect x="0" y="28" width="120" height="30" fill="#ffffff"/>
+    </mask>
+    <g transform="translate(0, 7)" mask="url(#s_masonry_mask_4)" >
+        <path fill="url(#s_masonry_gradient_1)" d="M75.2,50.2c-4.9,0-9.5,1-13.5,2.8c5.1,3.4,9.1,7.5,11.5,12.1h27.6C97.9,56.5,87.5,50.2,75.2,50.2z"/>
+        <path fill="url(#s_masonry_gradient_2)" d="M0,65.1h73.2c-6.7-12.9-25.8-22.2-48.5-22.2c-9,0-17.4,1.5-24.7,4C0,46.9,0,65.1,0,65.1z"/>
+    </g>
+
+
+    <!-- Image -->
+    <circle cx="225" cy="18" r="6" fill="#f3ed63"/>
+    <!-- <mask id="s_masonry_mask_5">
+        <rect x="0" y="28" width="120" height="30" fill="#ffffff"/>
+    </mask> -->
+    <g transform="translate(120, -23)" mask="url(#s_masonry_mask_4)" >
+        <path fill="url(#s_masonry_gradient_1)" d="M75.2,50.2c-4.9,0-9.5,1-13.5,2.8c5.1,3.4,9.1,7.5,11.5,12.1h27.6C97.9,56.5,87.5,50.2,75.2,50.2z"/>
+        <path fill="url(#s_masonry_gradient_2)" d="M0,65.1h73.2c-6.7-12.9-25.8-22.2-48.5-22.2c-9,0-17.4,1.5-24.7,4C0,46.9,0,65.1,0,65.1z"/>
+    </g>
+
+    <!-- Text -->
+    <rect x="120" y="35" width="60" height="30" fill="#c9ecfc"/>
+    <rect x="135" y="46" width="30" height="2" fill="#222222"/>
+    <rect x="135" y="51" width="30" height="1" fill="#666666"/>
+    <rect x="135" y="54" width="20" height="1" fill="#666666"/>
+    <!-- Text -->
+    <rect x="180" y="35" width="60" height="30" fill="#ffffff"/>
+    <rect x="195" y="46" width="30" height="2" fill="#333333"/>
+    <rect x="195" y="51" width="30" height="1" fill="#666666"/>
+    <rect x="195" y="54" width="20" height="1" fill="#666666"/>
+</svg>
diff --git a/addons/website/static/src/img/snippets_options/masonry_template_reversed.svg b/addons/website/static/src/img/snippets_options/masonry_template_reversed.svg
new file mode 100644
index 00000000000..d064c03d946
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/masonry_template_reversed.svg
@@ -0,0 +1,37 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="240" height="70" viewBox="0 0 240 70">
+    <defs>
+        <linearGradient id="s_masonry_gradient_1" gradientUnits="userSpaceOnUse" x1="82" y1="52" x2="75" y2="45">
+            <stop offset="0%" stop-color="#008374"/>
+            <stop offset="100%" stop-color="#006a59"/>
+        </linearGradient>
+        <linearGradient id="s_masonry_gradient_2" gradientUnits="userSpaceOnUse" x1="42" y1="42" x2="22" y2="55">
+            <stop offset="0%" stop-color="#00aa89"/>
+            <stop offset="100%" stop-color="#009989"/>
+        </linearGradient>
+    </defs>
+    <!-- Background -->
+    <rect x="0" y="5" width="120" height="60" fill="#c9ecfc"/>
+    <!-- Text -->
+    <rect x="0" y="5" width="60" height="30" fill="#ffffff"/>
+    <rect x="15" y="16" width="30" height="2" fill="#222222"/>
+    <rect x="15" y="21" width="30" height="1" fill="#666666"/>
+    <rect x="15" y="24" width="20" height="1" fill="#666666"/>
+    <!-- Text -->
+    <rect x="15" y="46" width="30" height="2" fill="#222222"/>
+    <rect x="15" y="51" width="30" height="1" fill="#666666"/>
+    <rect x="15" y="54" width="20" height="1" fill="#666666"/>
+    <!-- Text -->
+    <rect x="75" y="16" width="30" height="2" fill="#333333"/>
+    <rect x="75" y="21" width="30" height="1" fill="#666666"/>
+    <rect x="75" y="24" width="20" height="1" fill="#666666"/>
+    <!-- Text -->
+    <rect x="60" y="35" width="60" height="30" fill="#ffffff"/>
+    <rect x="75" y="46" width="30" height="2" fill="#333333"/>
+    <rect x="75" y="51" width="30" height="1" fill="#666666"/>
+    <rect x="75" y="54" width="20" height="1" fill="#666666"/>
+    <!-- Image -->
+    <rect x="120" y="5" width="120" height="60" fill="#9ccde4"/>
+    <circle cx="225" cy="20" r="6" fill="#f3ed63"/>
+    <path style="s_masonry_gradient_1" fill="url(#s_masonry_gradient_1)" d="M75.2,50.2c-4.9,0-9.5,1-13.5,2.8c5.1,3.4,9.1,7.5,11.5,12.1h27.6C97.9,56.5,87.5,50.2,75.2,50.2z" transform="translate(120, 0)"/>
+    <path style="s_masonry_gradient_2" fill="url(#s_masonry_gradient_2)" d="M0,65.1h73.2c-6.7-12.9-25.8-22.2-48.5-22.2c-9,0-17.4,1.5-24.7,4C0,46.9,0,65.1,0,65.1z" transform="translate(120, 0)"/>
+</svg>
diff --git a/addons/website/static/src/img/snippets_options/masonry_template_texts_image_texts.svg b/addons/website/static/src/img/snippets_options/masonry_template_texts_image_texts.svg
new file mode 100644
index 00000000000..a2ea025e33b
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/masonry_template_texts_image_texts.svg
@@ -0,0 +1,39 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="240" height="70" viewBox="0 0 240 70">
+    <defs>
+        <linearGradient id="s_masonry_gradient_1" gradientUnits="userSpaceOnUse" x1="82" y1="52" x2="75" y2="45">
+            <stop offset="0%" stop-color="#008374"/>
+            <stop offset="100%" stop-color="#006a59"/>
+        </linearGradient>
+        <linearGradient id="s_masonry_gradient_2" gradientUnits="userSpaceOnUse" x1="42" y1="42" x2="22" y2="55">
+            <stop offset="0%" stop-color="#00aa89"/>
+            <stop offset="100%" stop-color="#009989"/>
+        </linearGradient>
+    </defs>
+    <!-- Text -->
+    <rect x="0" y="5" width="60" height="30" fill="#ffffff"/>
+    <rect x="15" y="16" width="30" height="2" fill="#333333"/>
+    <rect x="15" y="21" width="30" height="1" fill="#666666"/>
+    <rect x="15" y="24" width="20" height="1" fill="#666666"/>
+    <!-- Text -->
+    <rect x="0" y="35" width="60" height="30" fill="#c9ecfc"/>
+    <rect x="15" y="46" width="30" height="2" fill="#333333"/>
+    <rect x="15" y="51" width="30" height="1" fill="#666666"/>
+    <rect x="15" y="54" width="20" height="1" fill="#666666"/>
+    <!-- Image -->
+    <rect x="60" y="5" width="120" height="60" fill="#9ccde4"/>
+    <circle cx="160" cy="25" r="6" fill="#f3ed63"/>
+    <g transform="translate(60, 0)">
+        <path fill="url(#s_masonry_gradient_1)" d="M75.2,50.2c-4.9,0-9.5,1-13.5,2.8c5.1,3.4,9.1,7.5,11.5,12.1h27.6C97.9,56.5,87.5,50.2,75.2,50.2z"/>
+        <path fill="url(#s_masonry_gradient_2)" d="M0,65.1h73.2c-6.7-12.9-25.8-22.2-48.5-22.2c-9,0-17.4,1.5-24.7,4C0,46.9,0,65.1,0,65.1z"/>
+    </g>
+    <!-- Text -->
+    <rect x="180" y="5" width="60" height="30" fill="#c9ecfc"/>
+    <rect x="195" y="16" width="30" height="2" fill="#333333"/>
+    <rect x="195" y="21" width="30" height="1" fill="#666666"/>
+    <rect x="195" y="24" width="20" height="1" fill="#666666"/>
+    <!-- Text -->
+    <rect x="180" y="35" width="60" height="30" fill="#ffffff"/>
+    <rect x="195" y="46" width="30" height="2" fill="#333333"/>
+    <rect x="195" y="51" width="30" height="1" fill="#666666"/>
+    <rect x="195" y="54" width="20" height="1" fill="#666666"/>
+</svg>
diff --git a/addons/website/static/src/snippets/s_masonry_block/options.js b/addons/website/static/src/snippets/s_masonry_block/options.js
new file mode 100644
index 00000000000..281730e6e81
--- /dev/null
+++ b/addons/website/static/src/snippets/s_masonry_block/options.js
@@ -0,0 +1,99 @@
+/** @odoo-module */
+
+import options from 'web_editor.snippets.options';
+
+options.registry.MasonryLayout = options.Class.extend({
+    custom_events: Object.assign({}, options.Class.prototype.custom_events, {
+        'user_value_widget_opening': '_onWidgetOpening',
+    }),
+
+    /**
+     * @constructor
+     */
+    async start() {
+        this.containerEl = this.$target.find('> .container, > .container-fluid, > .o_container_small')[0];
+        this._templates = {};
+        return this._super(...arguments);
+    },
+
+    //--------------------------------------------------------------------------
+    // Options
+    //--------------------------------------------------------------------------
+
+    /**
+     * Changes the masonry snippet layout.
+     *
+     * @see this.selectClass for parameters
+     */
+    async selectMasonryTemplate(previewMode, widgetValue, params) {
+        await this._templatesLoading;
+
+        if (previewMode === 'reset') {
+            if (!this.beforePreviewNodes) {
+                // FIXME should not be necessary: only needed because we have a
+                // strange 'reset' sent after a non-preview
+                return;
+            }
+
+            // Empty the container and restore the original content
+            while (this.containerEl.lastChild) {
+                this.containerEl.removeChild(this.containerEl.lastChild);
+            }
+            for (const node of this.beforePreviewNodes) {
+                this.containerEl.appendChild(node);
+            }
+            this.beforePreviewNodes = null;
+            return;
+        }
+
+        if (!this.beforePreviewNodes) {
+            // We are about the apply a template on non-previewed content,
+            // save that content's nodes.
+            this.beforePreviewNodes = [...this.containerEl.childNodes];
+        }
+        // Empty the container and add the template content
+        while (this.containerEl.lastChild) {
+            this.containerEl.removeChild(this.containerEl.lastChild);
+        }
+        this.containerEl.insertAdjacentHTML('beforeend', this._templates[widgetValue]);
+
+        if (!previewMode) {
+            // The original content to keep saved has to be retrieved just
+            // before the preview (if we save it now, we might miss other items
+            // added by other options or custo).
+            this.beforePreviewNodes = null;
+        }
+    },
+
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
+
+    /**
+     * @private
+     * @param {OdooEvent} ev
+     */
+    _onWidgetOpening(ev) {
+        if (this._templatesLoading || ev.target.getName() !== 'masonry_template_opt') {
+            return;
+        }
+        const templateParams = ev.target.getMethodsParams('selectMasonryTemplate');
+        const proms = templateParams.possibleValues.map(async xmlid => {
+            if (!xmlid) {
+                return;
+            }
+            // TODO should be better and retrieve all rendering in one RPC (but
+            // those ~10 RPC are only done once per edit mode if masonry snippet
+            // option is opened, so I guess this is acceptable).
+            this._templates[xmlid] = await this._rpc({
+                model: 'ir.ui.view',
+                method: 'render_public_asset',
+                args: [`${xmlid}`, {}],
+                kwargs: {
+                    context: this.options.context,
+                },
+            });
+        });
+        this._templatesLoading = Promise.all(proms);
+    },
+});
diff --git a/addons/website/views/snippets/s_masonry_block.xml b/addons/website/views/snippets/s_masonry_block.xml
index acf0afc3a83..16455d90d0a 100644
--- a/addons/website/views/snippets/s_masonry_block.xml
+++ b/addons/website/views/snippets/s_masonry_block.xml
@@ -1,37 +1,305 @@
 <?xml version="1.0" encoding="utf-8"?>
 <odoo>
 
-<!-- Template -->
+<!-- Template to fill with the chosen view -->
 <template id="s_masonry_block" name="Masonry">
     <section class="s_masonry_block" data-vcss="001">
         <div class="container-fluid">
-            <div class="row">
-                <div class="col-lg-6 oe_img_bg o_bg_img_center text-center pb224 pt224" data-name="Block" style="background-image: url(/web/image/website.s_masonry_block_default_image_1);">
-                    <p><br/></p>
+            <t t-call="website.s_masonry_block_default_template"/>
+        </div>
+    </section>
+</template>
+
+<template id="s_masonry_block_default_template" groups="base.group_user">
+    <div class="row">
+        <div class="col-lg-6 oe_img_bg text-center pb224 pt224" data-name="Block" style="background-image: url(/web/image/website.s_masonry_block_default_image_1);">
+            <p><br/></p>
+        </div>
+        <div class="col-lg-6 s_col_no_resize">
+            <div class="row h-100">
+                <div class="col-lg-6 pt24 pb8 text-center o_cc o_cc2" data-name="Block">
+                    <h3>A great title</h3>
+                    <p>And a great subtitle</p>
                 </div>
-                <div class="col-lg-6">
-                    <div class="row h-100">
-                        <div class="col-lg-6 pt24 pb8 text-center o_cc o_cc3" data-name="Block">
-                            <h3>A great title</h3>
-                            <p>And a great subtitle</p>
-                        </div>
-                        <div class="col-lg-6 pt24 pb8 text-center bg-200" data-name="Block">
-                            <h3>A great title</h3>
-                            <p>And a great subtitle</p>
-                        </div>
-                        <div class="col-lg-6 pt24 pb8 text-center bg-200" data-name="Block">
-                            <h3>A great title</h3>
-                            <p>And a great subtitle</p>
-                        </div>
-                        <div class="col-lg-6 pt24 pb8 text-center o_cc o_cc4" data-name="Block">
-                            <h3>A great title</h3>
-                            <p>And a great subtitle</p>
-                        </div>
-                    </div>
+                <div class="col-lg-6 pt24 pb8 text-center o_cc o_cc3" data-name="Block">
+                    <h3>A great title</h3>
+                    <p>And a great subtitle</p>
+                </div>
+                <div class="col-lg-6 pt24 pb8 text-center o_cc o_cc4" data-name="Block">
+                    <h3>A great title</h3>
+                    <p>And a great subtitle</p>
+                </div>
+                <div class="col-lg-6 pt24 pb8 text-center o_cc o_cc2" data-name="Block">
+                    <h3>A great title</h3>
+                    <p>And a great subtitle</p>
                 </div>
             </div>
         </div>
-    </section>
+    </div>
+</template>
+
+<template id="s_masonry_block_reversed_template" groups="base.group_user">
+    <div class="row">
+        <div class="col-lg-6 s_col_no_resize">
+            <div class="row h-100">
+                <div class="col-lg-6 pt24 pb8 text-center o_cc o_cc3" data-name="Block">
+                    <h3>A great title</h3>
+                    <p>And a great subtitle</p>
+                </div>
+                <div class="col-lg-6 pt24 pb8 text-center o_cc o_cc2" data-name="Block">
+                    <h3>A great title</h3>
+                    <p>And a great subtitle</p>
+                </div>
+                <div class="col-lg-6 pt24 pb8 text-center o_cc o_cc2" data-name="Block">
+                    <h3>A great title</h3>
+                    <p>And a great subtitle</p>
+                </div>
+                <div class="col-lg-6 pt24 pb8 text-center o_cc o_cc4" data-name="Block">
+                    <h3>A great title</h3>
+                    <p>And a great subtitle</p>
+                </div>
+            </div>
+        </div>
+        <div class="col-lg-6 oe_img_bg text-center pb224 pt224" data-name="Block" style="background-image: url(/web/image/website.s_masonry_block_default_image_1);">
+            <p><br/></p>
+        </div>
+    </div>
+</template>
+
+<template id="s_masonry_block_images_template" groups="base.group_user">
+    <div class="row">
+        <div class="col-lg-6 oe_img_bg text-center pb224 pt224" data-name="Block" style="background-image: url(/web/image/website.s_masonry_block_default_image_1);">
+            <p><br/></p>
+        </div>
+        <div class="col-lg-6 oe_img_bg text-center pb224 pt224" data-name="Block" style="background-image: url(/web/image/website.s_masonry_block_default_image_2);">
+            <p><br/></p>
+        </div>
+    </div>
+</template>
+
+<template id="s_masonry_block_image_texts_image_template" groups="base.group_user">
+    <div class="row">
+        <div class="col-lg-3 oe_img_bg text-center pt224 pb224" data-name="Block" style="background-image: url(/web/image/website.s_masonry_block_default_image_2);">
+            <p><br/></p>
+        </div>
+        <div class="col-lg-3 s_col_no_resize">
+            <div class="row h-100">
+                <div class="col-lg-12 pt24 pb8 text-center o_cc o_cc2" data-name="Block">
+                    <h3>A great title</h3>
+                    <p>And a great subtitle</p>
+                </div>
+                <div class="col-lg-12 pt24 pb8 text-center o_cc o_cc4" data-name="Block">
+                    <h3>A great title</h3>
+                    <p>And a great subtitle</p>
+                </div>
+            </div>
+        </div>
+        <div class="col-lg-6 oe_img_bg text-center pt224 pb224" data-name="Block" style="background-image: url(/web/image/website.s_masonry_block_default_image_1);">
+            <p><br/></p>
+        </div>
+    </div>
+</template>
+
+<template id="s_masonry_block_mosaic_template" groups="base.group_user">
+    <div class="row">
+        <div class="col-lg-6 s_col_no_resize">
+            <div class="row">
+                <div class="col-lg-6 pt24 pb8 text-center o_cc o_cc3" data-name="Block">
+                    <h3>A great title</h3>
+                    <p>And a great subtitle</p>
+                </div>
+                <div class="col-lg-6 pt24 pb8 text-center o_cc o_cc2" data-name="Block">
+                    <h3>A great title</h3>
+                    <p>And a great subtitle</p>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-lg-12 oe_img_bg text-center pt224 pb224" data-name="Block"
+                    style="background-image: url(/web/image/website.s_masonry_block_default_image_1);">
+                    <p><br/></p>
+                </div>
+            </div>
+        </div>
+        <div class="col-lg-6 s_col_no_resize">
+            <div class="row">
+                <div class="col-lg-12 oe_img_bg text-center pt224 pb224" data-name="Block"
+                    style="background-image: url(/web/image/website.s_masonry_block_default_image_2);">
+                    <p><br/></p>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-lg-6 pt24 pb8 text-center o_cc o_cc2" data-name="Block">
+                    <h3>A great title</h3>
+                    <p>And a great subtitle</p>
+                </div>
+                <div class="col-lg-6 pt24 pb8 text-center o_cc o_cc4" data-name="Block">
+                    <h3>A great title</h3>
+                    <p>And a great subtitle</p>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<template id="s_masonry_block_texts_image_texts_template" groups="base.group_user">
+    <div class="row">
+        <div class="col-lg-3 s_col_no_resize">
+            <div class="row h-100">
+                <div class="col-lg-12 pt24 pb8 text-center o_cc o_cc3" data-name="Block">
+                    <h3>A great title</h3>
+                    <p>And a great subtitle</p>
+                </div>
+                <div class="col-lg-12 pt24 pb8 text-center o_cc o_cc2" data-name="Block">
+                    <h3>A great title</h3>
+                    <p>And a great subtitle</p>
+                </div>
+            </div>
+        </div>
+        <div class="col-lg-6 oe_img_bg text-center pt224 pb224" data-name="Block"
+            style="background-image: url(/web/image/website.s_masonry_block_default_image_1);">
+            <p><br/></p>
+        </div>
+        <div class="col-lg-3 s_col_no_resize">
+            <div class="row h-100">
+                <div class="col-lg-12 pt24 pb8 text-center o_cc o_cc2" data-name="Block">
+                    <h3>A great title</h3>
+                    <p>And a great subtitle</p>
+                </div>
+                <div class="col-lg-12 pt24 pb8 text-center o_cc o_cc4" data-name="Block">
+                    <h3>A great title</h3>
+                    <p>And a great subtitle</p>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<template id="s_masonry_block_alternation_text_template" groups="base.group_user">
+    <div class="row">
+        <div class="col-lg-3 pt24 pb8 text-center o_cc o_cc2" data-name="Block">
+            <h3>A great title</h3>
+            <p>And a great subtitle</p>
+        </div>
+        <div class="col-lg-3 pt24 pb8 text-center o_cc o_cc4" data-name="Block">
+            <h3>A great title</h3>
+            <p>And a great subtitle</p>
+        </div>
+        <div class="col-lg-3 pt24 pb8 text-center o_cc o_cc2" data-name="Block">
+            <h3>A great title</h3>
+            <p>And a great subtitle</p>
+        </div>
+        <div class="col-lg-3 pt24 pb8 text-center o_cc o_cc3" data-name="Block">
+            <h3>A great title</h3>
+            <p>And a great subtitle</p>
+        </div>
+    </div>
+</template>
+
+<template id="s_masonry_block_alternation_text_image_template" groups="base.group_user">
+    <div class="row">
+        <div class="col-lg-3 pt24 pb8 text-center o_cc o_cc2" data-name="Block">
+            <h3>A great title</h3>
+            <p>And a great subtitle</p>
+        </div>
+        <div class="col-lg-3 oe_img_bg text-center pt224 pb224" data-name="Block" style="background-image: url(/web/image/website.s_masonry_block_default_image_1);">
+            <p><br/></p>
+        </div>
+        <div class="col-lg-3 pt24 pb8 text-center o_cc o_cc2" data-name="Block">
+            <h3>A great title</h3>
+            <p>And a great subtitle</p>
+        </div>
+        <div class="col-lg-3 oe_img_bg text-center pt224 pb224" data-name="Block" style="background-image: url(/web/image/website.s_masonry_block_default_image_2);">
+            <p><br/></p>
+        </div>
+    </div>
+</template>
+
+<template id="s_masonry_block_alternation_image_text_template" groups="base.group_user">
+    <div class="row">
+        <div class="col-lg-3 oe_img_bg text-center pt224 pb224" data-name="Block" style="background-image: url(/web/image/website.s_masonry_block_default_image_1);">
+            <p><br/></p>
+        </div>
+        <div class="col-lg-3 pt24 pb8 text-center o_cc o_cc4" data-name="Block">
+            <h3>A great title</h3>
+            <p>And a great subtitle</p>
+        </div>
+        <div class="col-lg-3 oe_img_bg text-center pt224 pb224" data-name="Block" style="background-image: url(/web/image/website.s_masonry_block_default_image_2);">
+            <p><br/></p>
+        </div>
+        <div class="col-lg-3 pt24 pb8 text-center o_cc o_cc3" data-name="Block">
+            <h3>A great title</h3>
+            <p>And a great subtitle</p>
+        </div>
+    </div>
+</template>
+
+<template id="s_masonry_block_alternation_text_image_text_template" groups="base.group_user">
+    <div class="row">
+        <div class="col-lg-3 pt24 pb8 text-center o_cc o_cc2" data-name="Block">
+            <h3>A great title</h3>
+            <p>And a great subtitle</p>
+        </div>
+        <div class="col-lg-6 oe_img_bg text-center pt224 pb224" data-name="Block" style="background-image: url(/web/image/website.s_masonry_block_default_image_1);">
+            <p><br/></p>
+        </div>
+        <div class="col-lg-3 pt24 pb8 text-center o_cc o_cc2" data-name="Block">
+            <h3>A great title</h3>
+            <p>And a great subtitle</p>
+        </div>
+    </div>
+</template>
+
+<!-- Options -->
+<template id="s_product_catalog_options" inherit_id="website.snippet_options">
+    <xpath expr="//div[@data-js='layout_column']" position="after">
+        <div data-js="MasonryLayout" data-selector=".s_masonry_block">
+            <we-select string="Template"
+                data-name="masonry_template_opt"
+                data-attribute-name="masonryTemplate"
+                data-attribute-default-value="default">
+                <we-button title="Default"
+                    data-select-masonry-template="website.s_masonry_block_default_template"
+                    data-select-data-attribute="default"
+                    data-img="/website/static/src/img/snippets_options/masonry_template_default.svg"/>
+                <we-button title="Default Reversed"
+                    data-select-masonry-template="website.s_masonry_block_reversed_template"
+                    data-select-data-attribute="default_reversed"
+                    data-img="/website/static/src/img/snippets_options/masonry_template_reversed.svg"/>
+                <we-button title="Images"
+                    data-select-masonry-template="website.s_masonry_block_images_template"
+                    data-select-data-attribute="images"
+                    data-img="/website/static/src/img/snippets_options/masonry_template_images.svg"/>
+                <we-button title="Image Text Image"
+                    data-select-masonry-template="website.s_masonry_block_image_texts_image_template"
+                    data-select-data-attribute="image_text_image"
+                    data-img="/website/static/src/img/snippets_options/masonry_template_image_texts_image.svg"/>
+                <we-button title="Mosaic"
+                    data-select-masonry-template="website.s_masonry_block_mosaic_template"
+                    data-select-data-attribute="mosaic"
+                    data-img="/website/static/src/img/snippets_options/masonry_template_mosaic.svg"/>
+                <we-button title="Text Image Text"
+                    data-select-masonry-template="website.s_masonry_block_texts_image_texts_template"
+                    data-select-data-attribute="text_image_text"
+                    data-img="/website/static/src/img/snippets_options/masonry_template_texts_image_texts.svg"/>
+                <we-button title="Alternate Text"
+                    data-select-masonry-template="website.s_masonry_block_alternation_text_template"
+                    data-select-data-attribute="alternate_text"
+                    data-img="/website/static/src/img/snippets_options/masonry_template_alternate_texts.svg"/>
+                <we-button title="Alternate Text Image"
+                    data-select-masonry-template="website.s_masonry_block_alternation_text_image_template"
+                    data-select-data-attribute="alternate_text_image"
+                    data-img="/website/static/src/img/snippets_options/masonry_template_alternate_text_image.svg"/>
+                <we-button title="Alternate Image Text"
+                    data-select-masonry-template="website.s_masonry_block_alternation_image_text_template"
+                    data-select-data-attribute="alternate_image_text"
+                    data-img="/website/static/src/img/snippets_options/masonry_template_alternate_image_text.svg"/>
+                <we-button title="Alternate Text Image Text"
+                    data-select-masonry-template="website.s_masonry_block_alternation_text_image_text_template"
+                    data-select-data-attribute="alternate_text_image_text"
+                    data-img="/website/static/src/img/snippets_options/masonry_template_alternate_text_image_text.svg"/>
+            </we-select>
+        </div>
+    </xpath>
 </template>
 
 <!-- Assets -->
diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml
index 847f2eac97f..f3f90733fe3 100644
--- a/addons/website/views/snippets/snippets.xml
+++ b/addons/website/views/snippets/snippets.xml
@@ -440,7 +440,8 @@
 
     <div data-js="layout_column"
         data-selector="section"
-        data-target="> *:has(> .row:not(.s_nb_column_fixed)), > .s_allow_columns">
+        data-target="> *:has(> .row:not(.s_nb_column_fixed)), > .s_allow_columns"
+        data-exclude=".s_masonry_block">
         <we-select string="Columns" data-no-preview="true">
             <we-button data-select-count="0" data-name="zero_cols_opt">None</we-button>
             <we-button data-select-count="1">1</we-button>
@@ -474,7 +475,7 @@
     <t t-set="only_bg_image_exclude" t-value="''"/>
 
     <t t-set="both_bg_color_image_selector" t-value="'section, .carousel-item, .s_masonry_block .row > div, .s_color_blocks_2 .row > div, .parallax'"/>
-    <t t-set="both_bg_color_image_exclude" t-value="base_only_bg_image_selector + ', .s_carousel_wrapper, .s_color_blocks_2, .s_image_gallery .carousel-item, .s_google_map, .s_map, [data-snippet] :not(.oe_structure) > [data-snippet]'"/>
+    <t t-set="both_bg_color_image_exclude" t-value="base_only_bg_image_selector + ', .s_carousel_wrapper, .s_color_blocks_2, .s_image_gallery .carousel-item, .s_google_map, .s_map, [data-snippet] :not(.oe_structure) > [data-snippet], .s_masonry_block, .s_masonry_block .s_col_no_resize'"/>
 
     <t t-call="web_editor.snippet_options_background_options">
         <t t-set="selector" t-value="both_bg_color_image_selector"/>
@@ -504,14 +505,14 @@
     <!-- Border | Columns -->
     <div data-js="Box"
          data-selector="section .row > div"
-         data-exclude=".s_col_no_bgcolor, .s_col_no_bgcolor.row > div, .s_image_gallery .row > div">
+         data-exclude=".s_col_no_bgcolor, .s_col_no_bgcolor.row > div, .s_image_gallery .row > div, .s_masonry_block .s_col_no_resize">
         <t t-call="website.snippet_options_border_widgets"/>
         <t t-call="website.snippet_options_shadow_widgets"/>
     </div>
 
     <!-- Mobile display options -->
     <div data-js="MobileVisibility" data-selector="section, section .row > div"
-         data-exclude=".s_col_no_resize.row > div">
+         data-exclude=".s_col_no_resize.row > div, .s_masonry_block .s_col_no_resize">
         <we-button class="o_we_link o_we_mobile" data-show-on-mobile="true" data-no-preview="true"
                    data-img="/website/static/src/img/snippets_options/mobile_invisible.svg"
                    data-active-img="/website/static/src/img/snippets_options/mobile_visible.svg"/>
@@ -519,12 +520,12 @@
 
     <div data-js="sizing_y"
         data-selector="section, .row > div, .parallax, .s_hr, .carousel-item, .s_rating"
-        data-exclude="section:has(> .carousel), .s_image_gallery .carousel-item, .s_col_no_resize.row > div"/>
+        data-exclude="section:has(> .carousel), .s_image_gallery .carousel-item, .s_col_no_resize.row > div, .s_col_no_resize"/>
 
     <div data-js="sizing_x"
         data-selector=".row > div"
         data-drop-near=".row:not(.s_col_no_resize) > div"
-        data-exclude=".s_col_no_resize.row > div"/>
+        data-exclude=".s_col_no_resize.row > div, .s_col_no_resize"/>
 
     <t t-set="so_snippet_addition_selector" t-translation="off">section, .parallax, .s_popup</t>
     <div id="so_snippet_addition"