diff --git a/doc/content/user_guide/web-components.md b/doc/content/user_guide/web-components.md
index 3264a0cc..1da82ba2 100644
--- a/doc/content/user_guide/web-components.md
+++ b/doc/content/user_guide/web-components.md
@@ -131,57 +131,71 @@ buttons will automatically use the custom color.
 
 ## Cards
 
-::: grid
-::: grid-item-card
-Only heading
-:::
+{{< grid >}}
+
+{{< card >}}
+title = 'Only title'
+{{< /card >}}
 
-::: grid-item-card
+{{< card >}}
+body = '''
 Only body.
 
 But with multiple text paragraphs.
-:::
-
-::: grid-item-card
-Heading and body
+'''
+{{< /card >}}
 
+{{< card >}}
+title = 'Heading and body'
+body = '''
 Content of the third card.
 
-`Sample badge`{.interpreted-text role="bdg-primary"}
-:::
-:::
+{{< badge primary >}}Sample badge{{< /badge >}}
+'''
+{{< /card >}}
 
-::: grid
-::: grid-item-card
-A card with a dropdown menu
+{{< /grid >}}
 
-::: dropdown
-`eye me-1`{.interpreted-text role="fa"} Click to expand dropdown
 
-Hidden content
-:::
-:::
+{{< grid >}}
 
-::: {.grid-item-card link="https://example.com"}
-A clickable card
-:::
-:::
+{{< card >}}
+title = 'A card with a dropdown menu'
+body = '''
+{{< dropdown >}}
+title = 'Click to expand dropdown'
+icon = 'fa-solid fa-eye'
+body = 'Hidden content'
+{{< /dropdown >}}
+'''
+{{< /card >}}
 
-::: grid
-::: grid-item-card
+{{< card >}}
+title = 'A clickable card'
+link = 'https://example.com'
+{{< /card >}}
 
-### panel 1 header
+{{< /grid >}}
 
-panel 1 content more content ++++++++++++++ panel 1 footer
-:::
 
-::: grid-item-card
+{{< grid >}}
 
-### panel 2 header
+{{< card >}}
+header = 'Header'
+title = 'Card Title'
+body = 'Card content'
+footer = 'Footer'
+{{< /card >}}
 
-panel 2 content ++++++++++++++ panel 2 footer
-:::
-:::
+
+{{< card >}}
+header = 'Header'
+title = 'Card Title'
+body = 'Card content'
+footer = 'Footer'
+{{< /card >}}
+
+{{< /grid >}}
 
 ## Tabs
 
diff --git a/layouts/shortcodes/grid.html b/layouts/shortcodes/grid.html
index 17a3610c..66753f9b 100644
--- a/layouts/shortcodes/grid.html
+++ b/layouts/shortcodes/grid.html
@@ -2,7 +2,7 @@
 
 doc: Grids.
 
-{{< grid >}}
+{{< grid columns="1 2 2 3">}}
 
 {{< card >}}
 title = 'Only title'
@@ -25,11 +25,6 @@
 '''
 {{< /card >}}
 
-{{< /grid >}}
-
-
-{{< grid >}}
-
 {{< card >}}
 title = 'A card with a dropdown menu'
 body = '''
@@ -46,19 +41,6 @@
 link = 'https://example.com'
 {{< /card >}}
 
-{{< /grid >}}
-
-
-{{< grid >}}
-
-{{< card >}}
-header = 'Header'
-title = 'Card Title'
-body = 'Card content'
-footer = 'Footer'
-{{< /card >}}
-
-
 {{< card >}}
 header = 'Header'
 title = 'Card Title'
@@ -71,7 +53,16 @@
 */}}
 
 <div class="sd-container-fluid sd-mb-4">
-<div class="sd-row">
+{{- with .Get "columns" -}}
+  {{ $columns := split . " " }}
+  {{ $xs := index $columns 0 }}
+  {{ $sm := index $columns 1 }}
+  {{ $md := index $columns 2 }}
+  {{ $lg := index $columns 3 }}
+  <div class="sd-row sd-row-cols-1 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 }}">
+{{- else }}
+  <div class="sd-row">
+{{- end }}
   {{ .Inner }}
 </div>
 </div>