# Columns

The `columns` and `split` layouts keep the level-1 title at full width and lay the `:::col` blocks
out side by side. `:::left` and `:::right` are aliases of `:::col`.

## Live demo

<StoryEmbed slug="columns" />

## Syntax

```md title="Markdown"
--- layout=columns ratio=2:1

# Free columns

:::col
### Lorem ipsum
Dolor sit amet.
:::

:::col
Consectetur adipiscing elit.
:::
```

```mdx title="MDX"
<Columns ratio="1:2">
  <Col>Lorem</Col>
  <Col>Ipsum</Col>
</Columns>
```

`<Left>` and `<Right>` are the JSX aliases of `<Col>`.

## Attributes and props

| Attribute | Type                   | Default       | Description                                   |
| --------- | ---------------------- | ------------- | --------------------------------------------- |
| `ratio`   | `string` such as `2:1` | equal columns | Column proportions, on the slide or `Columns` |

## In other formats

<FormatSupport />