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>