---
title: "Column Block — A Single Layout Column"
description: "A single column inside a column list, carrying a width fraction and its own list of child blocks."
source: https://blokeditor.com/docs/column/
lastmod: 2026-09-07
---

Framework JavaScript

Block Tools Column

# Column block: one column of a layout

A single column inside a column list. Not user-insertable on its own — columns are created and managed by the parent `column_list` block. Child blocks are nested inside the column via `contentIds`. The optional `widthRatio` controls the column’s width relative to its siblings (applied as flex-grow); omit it for equal width.

### Import

TypeScript

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

### Save Data

TypeScript

```
interface ColumnData {
  widthRatio?: number; // Width relative to siblings (flex-grow). Omitted = equal width.
}
// Child blocks are referenced via the block's saved `content` array
// (the in-memory `contentIds`), not stored here.
```

JSON

```
{
  "id": "column1",
  "type": "column",
  "data": {
    "widthRatio": 1.5
  },
  "content": ["block1", "block2"]
}
```

### Usage Example

TypeScript

```
// Column is not inserted directly — it is created by the ColumnList tool.
import { ColumnList, Column } from '@bloklabs/core/tools';

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