From d7f5b572339eaf20ac3baf6468ed11e9ccd68668 Mon Sep 17 00:00:00 2001 From: Agriya Khetarpal <74401230+agriyakhetarpal@users.noreply.github.com> Date: Thu, 1 Jan 2026 07:16:50 +0530 Subject: [PATCH 1/6] Add support for grid gutter --- layouts/partials/_elements/grid.html | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/layouts/partials/_elements/grid.html b/layouts/partials/_elements/grid.html index 178d434b..7d714146 100644 --- a/layouts/partials/_elements/grid.html +++ b/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 }} -
+ {{- $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 -}} +
{{- end }} {{- range $key, $item := $items -}} {{- if eq $item.type "card" }} From 39fea70dcd461100467c7f5693b4502aa0717df7 Mon Sep 17 00:00:00 2001 From: Agriya Khetarpal <74401230+agriyakhetarpal@users.noreply.github.com> Date: Thu, 1 Jan 2026 07:18:05 +0530 Subject: [PATCH 2/6] Add a single-parameter gutter example --- layouts/shortcodes/grid.html | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/layouts/shortcodes/grid.html b/layouts/shortcodes/grid.html index 0468c4c5..e9e5c761 100644 --- a/layouts/shortcodes/grid.html +++ b/layouts/shortcodes/grid.html @@ -118,6 +118,28 @@ {{< /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 >}} + */}} {{- $items := "" -}} From 617202bd006a38bf6bf1d90755b9a1314a710b3d Mon Sep 17 00:00:00 2001 From: Agriya Khetarpal <74401230+agriyakhetarpal@users.noreply.github.com> Date: Thu, 1 Jan 2026 07:18:30 +0530 Subject: [PATCH 3/6] Grid gutter example with zero-gutter --- layouts/shortcodes/grid.html | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/layouts/shortcodes/grid.html b/layouts/shortcodes/grid.html index e9e5c761..3c9c0994 100644 --- a/layouts/shortcodes/grid.html +++ b/layouts/shortcodes/grid.html @@ -140,6 +140,20 @@ {{< /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 >}} + */}} {{- $items := "" -}} From 6ac33082ab4444516778d7706366341891242c8c Mon Sep 17 00:00:00 2001 From: Agriya Khetarpal <74401230+agriyakhetarpal@users.noreply.github.com> Date: Thu, 1 Jan 2026 07:18:50 +0530 Subject: [PATCH 4/6] Add responsive gutter example (4 integers) --- layouts/shortcodes/grid.html | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/layouts/shortcodes/grid.html b/layouts/shortcodes/grid.html index 3c9c0994..f5281492 100644 --- a/layouts/shortcodes/grid.html +++ b/layouts/shortcodes/grid.html @@ -154,6 +154,24 @@ {{< /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 >}} + */}} {{- $items := "" -}} From 5cbaec421b4eac7aaea84059d5b8904b5bd474be Mon Sep 17 00:00:00 2001 From: Agriya Khetarpal <74401230+agriyakhetarpal@users.noreply.github.com> Date: Thu, 1 Jan 2026 07:20:03 +0530 Subject: [PATCH 5/6] Large (5) gutter example --- layouts/shortcodes/grid.html | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/layouts/shortcodes/grid.html b/layouts/shortcodes/grid.html index f5281492..3c78333f 100644 --- a/layouts/shortcodes/grid.html +++ b/layouts/shortcodes/grid.html @@ -172,6 +172,20 @@ {{< /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 >}} + */}} {{- $items := "" -}} From b3056c3a6a9b71813641860e1817aab4086ab55e Mon Sep 17 00:00:00 2001 From: Agriya Khetarpal <74401230+agriyakhetarpal@users.noreply.github.com> Date: Thu, 1 Jan 2026 07:20:25 +0530 Subject: [PATCH 6/6] Add a small sentence about the parameter values --- layouts/shortcodes/grid.html | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/layouts/shortcodes/grid.html b/layouts/shortcodes/grid.html index 3c78333f..1ab5735b 100644 --- a/layouts/shortcodes/grid.html +++ b/layouts/shortcodes/grid.html @@ -186,6 +186,14 @@ {{< /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 := "" -}}