Layout в дизайне — это не сетка и не отступы сами по себе, а принцип, по которому элементы интерфейса размещаются относительно друг друга и подстраиваются под изменение контента. Путаница возникает потому, что грид-сетка — лишь один из инструментов лейаута, а не его синоним.
Лейаут — что это простыми словами
Если объяснять без терминов: лейаут — это правило «что куда и как меняется на странице, когда что-то вокруг меняется». Добавили текст — кнопка не наезжает на соседний блок. Сжали окно браузера — колонки не разваливаются. Это разница между «расставленными элементами» и «организованной структурой», которая держит форму при любых условиях.
Чем лейаут отличается от сетки
Сетка (grid) — система направляющих, которая делит макет на колонки и модули. Это инструмент построения, а не сам принцип. Лейаут — более широкое понятие: он описывает, как элементы ведут себя внутри этой сетки и за её пределами — выравнивание, распределение пространства, поведение при переполнении.
Иначе говоря: сетка отвечает на вопрос «где может стоять элемент», а лейаут — на вопрос «что будет, если контента станет больше или меньше».
Auto layout — лейаут, который думает за вас
В Figma и аналогичных инструментах есть функция auto layout — она автоматически пересчитывает размеры и положение элементов внутри блока при изменении контента. Добавили строку текста — блок вырос, соседние элементы сдвинулись, ничего не сломалось руками.
Без auto layout дизайнеру приходится вручную двигать каждый элемент при любой правке текста или добавлении кнопки. С ним — макет ведёт себя предсказуемо, и это особенно заметно на длинных страницах с переменным объёмом контента: карточки товаров, списки отзывов, блоки FAQ.
Грид-лейаут и флекс-лейаут — два разных способа мышления
Грид-лейаут удобен, когда структура страницы заранее известна и симметрична: журнальная вёрстка, каталог товаров, дашборд с виджетами. Элементы привязаны к строкам и колонкам сетки.
Флекс-лейаут удобен, когда нужно гибкое распределение в одном направлении — например, ряд кнопок, который должен растягиваться или сжиматься в зависимости от ширины экрана, без жёсткой привязки к колонкам.
Профессиональный макет почти всегда сочетает оба подхода: грид — для общей структуры страницы, флекс — для локальных блоков внутри неё.
Частые ошибки новичков с layout
- Путают лейаут с расположением элементов «на глаз» — без правил адаптивности макет ломается на других экранах
- Игнорируют поведение при изменении контента — макет выглядит хорошо только с тестовым текстом, а с реальным — съезжает
- Не разделяют внешние и внутренние отступы — из-за этого блоки слипаются или, наоборот, разъезжаются непропорционально
Как лейаут работает при переносе макета в готовый сайт
Идея лейаута из Figma не переносится в браузер автоматически — её нужно повторить инструментами вёрстки: гридами, флексами, авто-отступами. Расхождение между макетом и сайтом чаще всего случается именно здесь — дизайнер закладывает один принцип поведения, а на сайте элементы ведут себя иначе.
В конструкторе сайтов Taptop система автолейаутов и вложенности работает напрямую в визуальном редакторе: блок подстраивается под контент так же, как в дизайн-инструменте — без риска, что вёрстка «не повторит» задуманное поведение.
Похожая логика разбирается и в статье про систему отступов в веб-дизайне — там она работает на уровне расстояний между блоками, здесь — на уровне их поведения.
А вам приходилось переделывать вёрстку из-за того, что лейаут не учли заранее? Расскажите в комментариях 👇
Частые вопросы
Вопрос: Layout это просто синоним макета?
Ответ: Нет. Макет — это конкретный визуальный результат, а layout — принцип, по которому элементы внутри этого макета размещаются и меняются.
Вопрос: Auto layout заменяет понимание принципов вёрстки?
Ответ: Нет, это инструмент, который ускоряет работу при понимании принципов. Без понимания иерархии и отступов auto layout даст хаотичный результат быстрее, а не качественный.
Вопрос: Можно ли использовать грид и флекс в одном макете?
Ответ: Да, и это стандартная практика — грид для общей структуры страницы, флекс для локального распределения внутри блоков.
Такие практические вопросы вёрстки мы регулярно разбираем в нашем тёплом комьюнити дизайнеров — заходите: Taptop Design Community