---
title: "Блок «Колонки» — многоколоночная вёрстка"
description: "Ряд колонок с изменяемой шириной, где каждая колонка сама является блоком и владеет собственными дочерними блоками."
source: https://blokeditor.com/ru/docs/column_list/
lastmod: 2026-09-07
---

Фреймворк JavaScript

Блочные инструменты Колонки

# Колонки: многоколоночная вёрстка страницы

Блок раскладки, который располагает дочерние блоки колонками бок о бок. Сам список колонок не хранит содержимого — каждая колонка представлена дочерним блоком `column`, а блоки, которые вы пишете, живут внутри этих колонок (через `contentIds`). Колонки создаются тремя способами: из тулбокса · перетаскиванием блока к другому блоку сбоку · выделением нескольких блоков и выбором «Преобразовать в колонки». Ширина колонок меняется разделителями между ними. Оба инструмента регистрируются разом групповой ссылкой `Columns` — `tools: { columns: Columns }` разворачивается в инструменты `column_list` и `column`; в сохранённом JSON по-прежнему лежат блоки `column_list` и `column`.

### Импорт

TypeScript

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

### Формат данных

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"]
}
```

### Пример использования

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,
    },
  },
});
```