Columns

The columns shortcode arranges content in a horizontal grid. Separate each column with <---> on its own line. On narrow screens the columns stack vertically automatically.

Two columns

{{< columns >}}
**Option A**

Works well for small datasets with simple queries.

<--->

**Option B**

Better for high-volume writes and concurrent connections.
{{< /columns >}}

Three columns

{{< columns >}}
Install the CLI:

```shell
npm install -g mybundle
```

<--->

Configure your project:

```shell
mybundle init
```

<--->

Run the build:

```shell
mybundle build
```
{{< /columns >}}

npm install -g mybundle

mybundle init

mybundle build

Custom ratio

Use ratio to control relative widths. The value maps directly to CSS fr units, so "2:1" gives the left column twice the space of the right.

{{< columns ratio="2:1" >}}
A wider left column for the main explanation or code sample.

<--->

A narrower right column for a note, tip, or screenshot.
{{< /columns >}}

Parameters

Notes

• Any number of columns is supported, though two or three work best on most screen widths.
• Each column renders full Markdown including code blocks, lists, badges and other shortcodes.
• Columns collapse to a single vertical stack on screens narrower than 768 px.