From 6091b72762e29bf51d0326f076b9f89bc7ba7000 Mon Sep 17 00:00:00 2001
From: lovelymandal16 <lovelymandal16@gmail.com>
Date: Mon, 27 Jul 2026 17:45:54 +0530
Subject: [PATCH] Add gutter spacing between grid columns

Adjacent colspan fields (e.g. two 6-column fields in a row) rendered
flush against each other with no gap. Adds a configurable gutter via
half-padding on .aem-GridColumn, offset by a matching negative margin
on .aem-Grid so the row's outer edge is unaffected.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 src/site/_grid.scss      | 5 +++++
 src/site/_variables.scss | 1 +
 2 files changed, 6 insertions(+)

diff --git a/src/site/_grid.scss b/src/site/_grid.scss
index a5e8428..9154119 100644
--- a/src/site/_grid.scss
+++ b/src/site/_grid.scss
@@ -19,6 +19,9 @@
 .aem-Grid {
   display: block;
   inline-size: 100%;
+  /* negative margin offsets the column gutter padding below so the
+     row's outer edge lines up with its container as before */
+  margin-inline: calc(#{$grid-gutter} / -2);
 }
 
 .aem-Grid::before,
@@ -41,6 +44,8 @@
 .aem-GridColumn {
   clear: both;
   box-sizing: border-box;
+  /* half gutter on each side: adjacent columns get a full gutter between them */
+  padding-inline: calc(#{$grid-gutter} / 2);
 }
 
 /* force showing hidden */
diff --git a/src/site/_variables.scss b/src/site/_variables.scss
index bc84755..7d57cf7 100644
--- a/src/site/_variables.scss
+++ b/src/site/_variables.scss
@@ -40,3 +40,4 @@ $radio-checkbox-gap: 20px;
 //== Grid
 
 $max_col: 12;
+$grid-gutter: 20px;