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;