Implement columns for gird items (#603)

Author: jarrodmillman

layouts/partials/_elements/card.html

@@ -2,7 +2,19 @@
 {{- $card := .card -}}
 {{- $class := "" }}{{- with $card.classcard }}{{ $class = . }}{{- end }}
 {{- if $grid_item_card -}}
-<div class="sd-col sd-d-flex-row">
+{{- $columns := default "" $card.columns -}}
+  {{- if eq $columns ""}}
+    <div class="sd-col sd-d-flex-row">
+  {{- else if eq $columns "auto"}}
+    <div class="sd-col sd-d-flex-row sd-col-auto sd-col-xs-auto sd-col-sm-auto sd-col-md-auto sd-col-lg-auto">
+  {{- else }}
+    {{- $columns := split $columns " " }}
+    {{- $xs := index $columns 0 }}
+    {{- $sm := index $columns 1 }}
+    {{- $md := index $columns 2 }}
+    {{- $lg := index $columns 3 }}
+    <div class="sd-col sd-d-flex-row sd-col-{{ $xs }} sd-col-xs-{{ $xs }} sd-col-sm-{{ $sm }} sd-col-md-{{ $md }} sd-col-lg-{{ $lg }}">
+ {{- end }}
  {{ with $card.link }}
   <div class="sd-card sd-w-100 sd-shadow-sm sd-card-hover {{ $class }}">
  {{ else }}

layouts/partials/_elements/item.html

@@ -1,7 +1,19 @@
-    <div class="sd-col sd-d-flex-column">
-      <p>
+{{- $columns := default "" .columns -}}
+  {{- if eq $columns ""}}
+    <div class="sd-col sd-d-flex-row">
+  {{- else if eq $columns "auto"}}
+    <div class="sd-col sd-d-flex-row sd-col-auto sd-col-xs-auto sd-col-sm-auto sd-col-md-auto sd-col-lg-auto">
+  {{- else }}
+    {{- $columns := split $columns " " }}
+    {{- $xs := index $columns 0 }}
+    {{- $sm := index $columns 1 }}
+    {{- $md := index $columns 2 }}
+    {{- $lg := index $columns 3 }}
+    <div class="sd-col sd-d-flex-row sd-col-{{ $xs }} sd-col-xs-{{ $xs }} sd-col-sm-{{ $sm }} sd-col-md-{{ $md }} sd-col-lg-{{ $lg }}">
+  {{- end }}
+      <div>
         {{- with (trim .body "\n") }}
           {{ . | markdownify }}
         {{- end }}
-      </p>
+      </div>
     </div>

layouts/shortcodes/grid.html

@@ -94,6 +94,25 @@
 
 {{< /grid >}}
 
+{{< grid columns="2 2 2 2" >}}
+
+[[item]]
+type = 'card'
+columns = "auto auto auto auto"
+body = 'A'
+
+[[item]]
+type = 'card'
+columns = "12 6 6 6"
+body = 'B'
+
+[[item]]
+type = 'card'
+columns = "12 12 12 12"
+body = 'C'
+
+{{< /grid >}}
+
 */}}
 
 {{- $items := "" -}}