Add support for grid gutters to control spacing between grid items

layouts/partials/_elements/grid.html

@@ -1,5 +1,6 @@
 {{- $outline := default "false" .outline -}}
 {{- $columns := default "auto" .columns -}}
+{{- $gutter := default "2" .gutter -}}
 {{- $items := .items -}}
 {{- if eq $outline "true" -}}
   {{- $outline = "sd-border-1" -}}
@@ -13,7 +14,17 @@
   {{- $sm := index $columns 1 }}
   {{- $md := index $columns 2 }}
   {{- $lg := index $columns 3 }}
-  <div class="sd-row sd-row-cols-{{ $xs }} sd-row-cols-xs-{{ $xs }} sd-row-cols-sm-{{ $sm }} sd-row-cols-md-{{ $md }} sd-row-cols-lg-{{ $lg }} sd-g-2 sd-g-xs-{{ $xs }} sd-g-sm-{{ $sm }} sd-g-md-{{ $md }} sd-g-lg-{{ $lg }}">
+  {{- $gutterParts := split $gutter " " -}}
+  {{- $gXs := index $gutterParts 0 -}}
+  {{- $gSm := $gXs -}}
+  {{- $gMd := $gXs -}}
+  {{- $gLg := $gXs -}}
+  {{- if gt (len $gutterParts) 1 -}}
+    {{- $gSm = index $gutterParts 1 -}}
+    {{- $gMd = index $gutterParts 2 -}}
+    {{- $gLg = index $gutterParts 3 -}}
+  {{- end -}}
+  <div class="sd-row sd-row-cols-{{ $xs }} sd-row-cols-xs-{{ $xs }} sd-row-cols-sm-{{ $sm }} sd-row-cols-md-{{ $md }} sd-row-cols-lg-{{ $lg }} sd-g-{{ $gXs }} sd-g-xs-{{ $gXs }} sd-g-sm-{{ $gSm }} sd-g-md-{{ $gMd }} sd-g-lg-{{ $gLg }}">
 {{- end }}
 {{- range $key, $item := $items -}}
   {{- if eq $item.type "card" }}

layouts/shortcodes/grid.html

@@ -118,6 +118,82 @@
 
 {{< /grid >}}
 
+Here's a grid with gutters. A single value applies to all breakpoints.
+
+{{< grid columns="1 2 3 4" gutter="1" >}}
+
+[[item]]
+type = 'card'
+body = 'Tight spacing'
+
+[[item]]
+type = 'card'
+body = 'Tight spacing'
+
+[[item]]
+type = 'card'
+body = 'Tight spacing'
+
+[[item]]
+type = 'card'
+body = 'Tight spacing'
+
+{{< /grid >}}
+
+Here's a grid with no gutters, which means no spacing between items.
+
+{{< grid columns="2 2 2 2" gutter="0" >}}
+
+[[item]]
+type = 'card'
+body = 'No spacing'
+
+[[item]]
+type = 'card'
+body = 'No spacing'
+
+{{< /grid >}}
+
+Here's a grid with responsive gutters (i.e., "xs sm md lg" are set).
+
+{{< grid columns="1 2 2 3" gutter="1 1 3 4" >}}
+
+[[item]]
+type = 'card'
+body = 'Responsive gutter: 0.25rem on mobile, 1rem on tablet, 1.5rem on desktop'
+
+[[item]]
+type = 'card'
+body = 'Responsive gutter: 0.25rem on mobile, 1rem on tablet, 1.5rem on desktop'
+
+[[item]]
+type = 'card'
+body = 'Responsive gutter: 0.25rem on mobile, 1rem on tablet, 1.5rem on desktop'
+
+{{< /grid >}}
+
+And here's a grid with a large gutter, for more spacious layouts.
+
+{{< grid columns="2 2 2 2" gutter="5" >}}
+
+[[item]]
+type = 'card'
+body = 'Large spacing (3rem)'
+
+[[item]]
+type = 'card'
+body = 'Large spacing (3rem)'
+
+{{< /grid >}}
+
+The parameters are based on sphinx-design system grid utilities, which is in-turn based on Bootstrap grid system. They are as follows:
+- 0: 0 (no spacing)
+- 1: 0.25rem
+- 2: 0.5rem (default)
+- 3: 1rem
+- 4: 1.5rem
+- 5: 3rem
+
 */}}
 
 {{- $items := "" -}}