🡔 [Layout](../layout)
# Layout `columns`
Let items flow like words on a printed newspaper. Works for long, text-heavy content. Consider using `stack`, `flex` and `grid` instead if you want a homogeneous list of items to flow into multiple responsive columns.
```vue-html
Normal paragraph. Text flows like in a newspaper. Set the column width in px. Columns will be equally distributed over the width of the container.
...break over columns...
```
---
Normal paragraph. Text flows like in a newspaper. Set the column width in px. Columns will be equally distributed over the width of the container.
---
...break over columns...
---
Make sure that all elements fit the column width, else they will leak into the neighboring columns.
### `no-rule`: Remove the rule (thin line) between columns
```vue-html
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
```
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
### Tricks
#### Prevent column breaks
Add the following style to the element that you want to preserve whole:
```css
style="break-inside: avoid;"
```