> ## Documentation Index
> Fetch the complete documentation index at: https://docs.landerlab.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Колонки: адаптивная вёрстка на лендинге

> Элемент Columns в LanderLab: как разделить секцию на колонки, настроить количество, ширину и Gap для десктопа, планшета и мобильных устройств.

Колонки позволяют разделить секцию на несколько вертикальных областей, чтобы размещать контент рядом.

Они нужны для таких макетов, как:

* Текст + изображение
* Сетки преимуществ
* Многоколоночные секции

### Как добавить колонки

* Откройте левую боковую панель
* Перейдите в **Layout**
* Перетащите **Columns** в секцию

## Настройки колонок

После выбора элемента справа появятся настройки колонок.

### Раскладка для разных устройств

Для каждого устройства можно задать свою раскладку колонок:

* **Desktop** → выберите количество колонок (1–6)
* **Tablet** → настройте раскладку для экранов среднего размера
* **Mobile** → обычно ставят 1 колонку для лучшей читаемости

👉 Так ваш дизайн будет адаптивным на всех устройствах.

## Количество и ширина колонок

Вы можете легко управлять и количеством колонок, и тем, сколько места занимает каждая.

* Выберите элемент **Columns**
* Откройте **Settings Panel** справа

### Изменение количества колонок

* Выберите готовую раскладку (2, 3, 4 и т. д.)

### Настройка ширины колонок

Есть два способа:

* **Visual Drag** → перетащите разделитель между колонками прямо на холсте
* Так можно быстро изменить соотношение ширины (например, 70/30 или 50/50)

## Gap (расстояние между колонками)

* **Gap** задаёт расстояние между колонками
* Измеряется в пикселях (px)

Пример:

* Gap: 0 → колонки соприкасаются
* Gap: 20 → между колонками появляется отступ

## Как работают колонки

* Каждая колонка работает как контейнер
* В каждую колонку можно помещать элементы
* Колонки располагаются внутри секций

Пример структуры:<br />Section → Columns → Elements

## Важные замечания

* Колонки должны находиться внутри секции
* Каждая колонка может содержать несколько элементов
* Для лучшей адаптивности раскладку можно менять для каждого устройства


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.