diff --git a/addons/web_editor/static/src/js/common/grid_layout_utils.js b/addons/web_editor/static/src/js/common/grid_layout_utils.js
index 4946327ce44..c076156e8ff 100644
--- a/addons/web_editor/static/src/js/common/grid_layout_utils.js
+++ b/addons/web_editor/static/src/js/common/grid_layout_utils.js
@@ -29,7 +29,8 @@ export function _getGridProperties(rowEl) {
  * @param {Element} rowEl the parent grid element of the element
  */
 export function _setElementToMaxZindex(element, rowEl) {
-    const childrenEls = [...rowEl.children].filter(el => el !== element);
+    const childrenEls = [...rowEl.children].filter(el => el !== element
+        && !el.classList.contains("o_we_grid_preview"));
     element.style.zIndex = Math.max(...childrenEls.map(el => el.style.zIndex)) + 1;
 }
 /**
diff --git a/addons/web_editor/static/src/js/editor/snippets.options.js b/addons/web_editor/static/src/js/editor/snippets.options.js
index 783886ff7a6..9fe5feec4e5 100644
--- a/addons/web_editor/static/src/js/editor/snippets.options.js
+++ b/addons/web_editor/static/src/js/editor/snippets.options.js
@@ -5111,6 +5111,12 @@ registry.Box = SnippetOptionWidget.extend({
 
 
 registry.layout_column = SnippetOptionWidget.extend({
+    /**
+     * @override
+     */
+    cleanUI() {
+        this._removeGridPreview();
+    },
 
     //--------------------------------------------------------------------------
     // Options
@@ -5257,6 +5263,30 @@ registry.layout_column = SnippetOptionWidget.extend({
         gridUtils._resizeGrid(rowEl);
         this.trigger_up('activate_snippet', {$snippet: $(newColumnEl)});
     },
+    /**
+     * @override
+     */
+    async selectStyle(previewMode, widgetValue, params) {
+        await this._super(previewMode, widgetValue, params);
+
+        const rowEl = this.$target[0];
+        const mobileViewThreshold = MEDIAS_BREAKPOINTS[SIZES.LG].minWidth;
+        const isMobileView = rowEl.ownerDocument.defaultView.frameElement.clientWidth < mobileViewThreshold;
+        if (["row-gap", "column-gap"].includes(params.cssProperty) && !isMobileView) {
+            // Reset the animation.
+            this._removeGridPreview();
+            void rowEl.offsetWidth; // Trigger a DOM reflow.
+
+            // Add an animated grid preview.
+            this.options.wysiwyg.odooEditor.observerUnactive("addGridPreview");
+            this.gridPreviewEl = gridUtils._addBackgroundGrid(rowEl, 0);
+            this.gridPreviewEl.classList.add("o_we_grid_preview");
+            gridUtils._setElementToMaxZindex(this.gridPreviewEl, rowEl);
+            this.options.wysiwyg.odooEditor.observerActive("addGridPreview");
+            this.removeGridPreview = this._removeGridPreview.bind(this);
+            rowEl.addEventListener("animationend", this.removeGridPreview);
+        }
+    },
 
     //--------------------------------------------------------------------------
     // Private
@@ -5377,6 +5407,22 @@ registry.layout_column = SnippetOptionWidget.extend({
         // Kept for compatibility.
         rowEl.style.removeProperty('--grid-item-padding-x');
         rowEl.style.removeProperty('--grid-item-padding-y');
+        rowEl.style.removeProperty("gap");
+    },
+    /**
+     * Removes the grid preview that was added when changing the grid gaps.
+     *
+     * @private
+     */
+    _removeGridPreview() {
+        this.options.wysiwyg.odooEditor.observerUnactive("removeGridPreview");
+        this.$target[0].removeEventListener("animationend", this.removeGridPreview);
+        if (this.gridPreviewEl) {
+            this.gridPreviewEl.remove();
+            delete this.gridPreviewEl;
+        }
+        delete this.removeGridPreview;
+        this.options.wysiwyg.odooEditor.observerActive("removeGridPreview");
     },
 });
 
diff --git a/addons/web_editor/static/src/scss/web_editor.frontend.scss b/addons/web_editor/static/src/scss/web_editor.frontend.scss
index bc488d61575..ca9c1626c82 100644
--- a/addons/web_editor/static/src/scss/web_editor.frontend.scss
+++ b/addons/web_editor/static/src/scss/web_editor.frontend.scss
@@ -34,6 +34,11 @@
 
 // GRID LAYOUT
 .o_grid_mode {
+    @include media-breakpoint-down(lg) {
+        // No gaps in mobile view.
+        row-gap: 0px !important;
+        column-gap: 0px !important;
+    }
     @include media-breakpoint-up(lg) {
         display: grid !important;
         grid-auto-rows: 50px;
diff --git a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
index c20c19a2c96..15a9c1c0dd5 100644
--- a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
+++ b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
@@ -2614,6 +2614,22 @@ we-select.o_grid we-toggler {
         stroke-opacity: .2;
         stroke-width: 1px;
     }
+
+    &.o_we_grid_preview {
+        pointer-events: none;
+
+        .o_we_cell {
+            animation: gridPreview 2s 0.5s;
+        }
+    }
+}
+
+// Grid preview.
+@keyframes gridPreview {
+    to {
+        fill-opacity: 0;
+        stroke-opacity: 0;
+    }
 }
 
 .o_we_drag_helper {
diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml
index 3634d4d7dfd..36be8ac819d 100644
--- a/addons/website/views/snippets/snippets.xml
+++ b/addons/website/views/snippets/snippets.xml
@@ -361,6 +361,10 @@
         <we-button class="o_we_bg_brand_primary o_grid" data-add-element="text" title="Text" data-name="text">Text</we-button>
         <we-button class="o_we_bg_brand_primary o_grid" data-add-element="button" title="Button" data-name="button">Button</we-button>
     </we-button-group>
+    <we-row t-att-class="indent and 'o_we_sublevel_1'" string="Spacing (Y, X)">
+        <we-input data-dependencies="grid_mode" data-select-style="" data-css-property="row-gap" data-unit="px" data-prevent-important="true" data-apply-to=".row"/>
+        <we-input data-dependencies="grid_mode" data-select-style="" data-css-property="column-gap" data-unit="px" data-max="60" data-prevent-important="true" data-apply-to=".row"/>
+    </we-row>
 </template>
 
 <template id="snippet_options" inherit_id="web_editor.snippet_options" primary="True">