---
title: "Columns Block — Multi-Column Page Layout"
description: "A row of resizable columns, where each column is itself a block that owns its own children."
source: https://blokeditor.com/docs/column_list/
lastmod: 2026-09-07
---

Framework JavaScript

Block Tools Columns

# Columns block: multi-column layout

A layout block that arranges its children into side-by-side columns. The column list itself holds no content — each column is a child `column` block, and the blocks you write live inside those columns (via `contentIds`). Columns can be created three ways: from the toolbox · by dragging a block beside another · by selecting multiple blocks and choosing "Turn into columns". Column widths are resizable via the separators between columns. Both tools can be registered at once with the `Columns` group handle — `tools: { columns: Columns }` expands to the `column_list` and `column` tools; saved JSON still contains `column_list` and `column` blocks.

### Import

TypeScript

```
import { ColumnList } from '@bloklabs/core/tools';
// …or register both column tools at once with the group handle:
import { Columns } from '@bloklabs/core/tools';
```

### Save Data

TypeScript

```
interface ColumnListData {
  // No persisted fields. The structure lives in the block's saved `content`
  // array (exposed as `contentIds` on the in-memory Block), which references
  // the child column blocks.
  // (columnCount and noSeed are transient seed hints, never saved.)
}
```

JSON

```
{
  "id": "col001",
  "type": "column_list",
  "data": {},
  "content": ["column1", "column2"]
}
```

### Usage Example

TypeScript

```
import { Blok } from '@bloklabs/core';
import { ColumnList, Column } from '@bloklabs/core/tools';

const editor = new Blok({
  holder: 'editor',
  tools: {
    column_list: {
      class: ColumnList,
    },
    column: {
      class: Column,
    },
  },
});
```