hugo: add support for specifying grid columns

Converts the grid shortcode to use named arguments, and adds support for
a second "cols" argument for specifying grid size (3 by default).

Signed-off-by: David Karlsson <35727626+dvdksn@users.noreply.github.com>

content/reference.md

@@ -80,16 +80,16 @@ various APIs, CLIs, drivers and specifications, and file formats.
 
 ## File formats
 
-{{< grid grid_files >}}
+{{< grid items="grid_files" >}}
 
 ## Command-line interfaces (CLIs)
 
-{{< grid grid_clis >}}
+{{< grid items="grid_clis" >}}
 
 ## Application programming interfaces (APIs)
 
-{{< grid grid_apis >}}
+{{< grid items="grid_apis" >}}
 
 ## Drivers and specifications
 
-{{< grid grid_specs >}}
+{{< grid items="grid_specs" >}}

content/security/_index.md

@@ -90,14 +90,14 @@ For both administrators and developers, Docker provides security-specific produc
 
 Explore the security features Docker offers to satisfy your company's security policies.
 
-{{< grid grid_admins >}} 
+{{< grid items="grid_admins" >}} 
 
 ## For developers
 
 See how you can protect your local environments, infrastructure, and networks without impeding productivity.
 
-{{< grid grid_developers >}}  
+{{< grid items="grid_developers" >}}
 
 ## Further resources
 
-{{< grid grid_resources >}}
+{{< grid items="grid_resources" >}}

layouts/shortcodes/grid.html

@@ -1,5 +1,6 @@
-<div class="not-prose grid grid-cols-3 xl:grid-cols-2 gap-4 sm:flex sm:flex-col">
-  {{ $items := index .Page.Params (.Get 0 | default "grid") }}
+{{ $cols := .Get "cols" | default 3 }}
+<div class="not-prose grid grid-cols-{{ $cols }} xl:grid-cols-{{ sub $cols 1 }} gap-4 sm:flex sm:flex-col">
+  {{ $items := index .Page.Params (.Get "items" | default "grid") }}
   {{ range $items }}
     {{ $opts := dict "title" .title "link" .link "description" .description "icon" .icon "image" .image }}
     {{ partial "components/card.html" $opts }}