Column Example

 Posted November 30, 2022  |  2 minutes  |  260 words  |  Some Person
Column Example https://caleb-vincent.gitlab.io/lessbeautifulhugo/post/2022-11-30_column-example/

This adds a multi-column side-by-side environment (will turn into 1 col for narrow devices):

{{< columns >}}
This is column 1.
{{< column >}}
This is column 2.
{{< endcolumns >}}

This is column 1.
This is column 2.

Any number of columns could be used, but they will start to look cramped.

{{< columns >}}
This is column 1.
{{< column >}}
This is column 2.
{{< column >}}
This is column 3.
{{< column >}}
This is column 4.
{{< column >}}
This is column 5.
{{< column >}}
This is column 6.
{{< column >}}
This is column 7.
{{< column >}}
This is column 8.
{{< column >}}
This is column 9.
{{< column >}}
This is column 10.
{{< endcolumns >}}

This is column 1.
This is column 2.
This is column 3.
This is column 4.
This is column 5.
This is column 6.
This is column 7.
This is column 8.
This is column 9.
This is column 10.

You can provide a maximum number of columns as an argument to the columns shortcode, and it’ll wrap them into a grid. Then reduce into a single column on narrow screens.

{{< columns 2>}}
This is row 1, column 1.
{{< column >}}
This is row 1, column 2.
{{< column >}}
This is row 2, column 1.
{{< column >}}
This is row 2, column 2.
{{< endcolumns >}}

This is row 1, column 1.
This is row 1, column 2.
This is row 2, column 1.
This is row 2, column 2.