# blocks/columns

> Columns — a container of columns on a CSS grid; each column holds ordinary blocks, and blocks drag between columns like anywhere else (an empty column still takes a drop).

Columns (F-23) — a container of columns on a CSS grid; each column holds ordinary blocks, and blocks drag between columns like anywhere else (an empty column still takes a drop). Collapses to a single column on narrow viewports. "/2 columns", "/3 columns".

```js
import columns from 'verbal-editor/blocks/columns';
```

| JS gzip | CSS gzip |
| --- | --- |
| 0.63 KB | 0.25 KB |

See it live on [Layout](#/examples/layout) — every example page on the landing is editable.

## Contract

|  |  |
| --- | --- |
| Block type | `columns` |
| Content | no text of its own |
| Slash menu | `▥ 2 columns` `▥ 3 columns` |
| Keywords | `columns` `layout` `side` |
| Copies as | `Markdown` `HTML` |
| Contains | `column` |

## Acceptance

| Feature | Acceptance | Budget |
| --- | --- | --- |
| F-23 · Multi-section (columns) | Blocks drag between columns; collapses to single column on narrow viewports | ≤ 1.5KB |