Контейнеры и автолейаут

Контейнер — это элемент редактора для обьединения группы элементов. Внутри можно свободно размещать тексты, кнопки, изображения и другие элементы, задавать общий фон, отступы и границы. Автолейаут в контейнере помогает создавать адаптивные макеты быстрее и поддерживать аккуратную структуру страницы без ручной настройки отступов.

---

Зачем нужен контейнер

Контейнер группирует элементы, чтобы управлять ими как одним целым. Элементы внутри контейнера свободные — их можно перемещать и располагать в любом месте контейнера.

Подробнее о свободных элементах читайте в нашей в статье Свободные элементы.

Как создать контейнер

Воспользуйтесь любым удобным вам способом из предложенных ниже:

1. Добавить элемент Контейнер из каталога элементов

Откройте каталог элементов, добавьте контейнер на страницу и наполните его нужными элементами.

2. Сгруппировать существующие элементы

• Выделите несколько элементов на странице и нажмите на иконку групировки или вызовите контекстное меню и выберите пункт Сгруппировать
• Или используйте комбинацию клавиш Cmd G (для Mac) / Ctrl G (для Windows)

Как разгруппировать контейнер

Воспользуйтесь комбинацией клавиш Cmd Shift G (для Mac) / Ctrl Shift G (для Windows)

Когда использовать контейнер без автолейаута

Используйте контейнер без автолейаута, когда нужно:

• перемещать группу элементов вместе (работать с несколькими элементами как с одним целым)
• задать общий фон или рамку
• свободно расставить элементы внутри без фиксированной структуры

---

Что такое автолейаут

Автолейаут — это режим контейнера, при котором элементы автоматически выстраиваются в ряд или колонку. Отступы между элементами, выравнивание и направление задаются один раз и применяются сразу ко всем вложенным элементам.

Автолейаут можно включить на любом существующем контейнере — он автоматически определит направление, выравнивание и отступы на основе текущего расположения элементов.

Как создать автолейаут

1. Из выделенных элементов (если конейнер ещё не создан)

Выделите несколько элементов на странице и нажмите Shift A или нажмите + в блоке автолейаута в панели настроек. Элементы сгруппируются в контейнер с активным автолейаутом.

2. На существующем контейнере

Выделите контейнер и активируйте автолейаут аналогично комбинацией клавиш или в панели настроек. Автолейаут автоматически определит настройки, учитывая расположение элементов внутри контейнера.

3. Из каталога элементов

Откройте каталог элементов и добавьте элемент Контейнер с автолейаутом на страницу.

Как отключить автолейаут

Используйте кнопку отключения в панели настроек или нажмите Command Shift A (Mac) Ctrl Shift A (Windows)

После отключения элементы остаются на своих местах и становятся свободными — они больше не придерживаются структуры автолейаута и их можно произвольно перемещать внутри контейнера.

Включить автолейаут обратно можно в любой момент — нажмите Shift + A или + в блоке автолейаута в панели настроек.

---

Настройки автолейаута

Направление

Определяет, как элементы выстраиваются внутри контейнера:

• Вертикально — в колонку сверху вниз
• Горизонтально — в строку слева направо
• С переносом — в строку, с переносом на следующую строку при нехватке места

Выравнивание

Управляет расположением элементов по горизонтали и вертикали внутри контейнера.

Подсказка

Двойной клик по иконке выравнивания равномерно распределит свободное пространство между элементами.

Отступы между элементами

Настраивая расстояния между элементами внутри автолейаута, заданное значение автоматически применяется между всеми элементами.

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

Внутренний отступ

Как и у других элементов, в контейнере можно настроить внутренний отступ до содержимого отдельно для каждой стороны.

Совет

Зажмите Option (Mac) или Alt (Windows) при изменении отступа — значение применится сразу к двум противоположным сторонам.

Зажмите Cmd (Mac) или Ctrl (Windows) — значение применится ко всем четырём сторонам сразу.

---

Размер контейнера

Контейнеру автолейаута можно задать фиксированный размер или использовать значение Auto — тогда контейнер будет подстраиваться под размер своего содержимого. При изменении контента внутри границы контейнера пересчитываются автоматически.

Подсказка

Дважды кликните на грань контейнера, чтобы быстро применить значение Auto, или воспользуйтесь панелью настроек

---

Размеры элементов внутри автолейаута

Элементы внутри автолейаута имеют те же настройки размеров, что и свободные элементы: ширина, высота, минимальные и максимальные значения, поворот. При этом они продолжают учитывать структуру автолейаута.

Это принципиальное отличие от контент-зон — колонок и карточек — где элементы просто выстраиваются друг за другом и не дают возможности гибко управлять размерами.
Автолейаут даёт точный контроль над каждым элементом без потери структуры.

Единица измерения Fill

Единица измерения Fill растягивает элемент на всё доступное пространство контейнера по ширине или высоте. Если таких элементов несколько — они делят пространство поровну.

Fill удобен для адаптивных блоков: элемент автоматически подстраивается под размер контейнера на любом устройстве.

Рекомендация

Использование единицы измерения Fill для элементов в автолейауте позволяет элементу легко адаптироваться под разные устройства.

---

Вложенность

Контейнеры с автолейаутом можно вкладывать друг в друга. Вложенные контейнеры настраиваются независимо друг от друга — у каждого своё направление, отступы и выравнивание. Это позволяет комбинировать строки с колонками и собирать многоуровневые лейауты любой сложности.

---

Сортировка элементов

Элементы внутри автолейаута можно перетаскивать — структура перестраивается автоматически. Элемент можно переместить в другой автолейаут или добавить в него свободный элемент со страницы — он встроится в структуру и будет учитывать её настройки.