войти

Дизайнерам и разработчикам

База знаний

Объединение блоков в контейнер

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

Необходимость компоновки блоков между собой

Типичное применение компоновки - строчки в шапке, когда надо блоки “логотип”, “меню”, “телефоны” вывести не друг под другом, а в одной строке. Чтоб реализовать это:

  • Добавляем контейнер
  • Настраиваем компоновку контейнера: флексбокс, горизонтальный, просвет между блоками
  • В контейнер добавляем блок “Логотип”
  • После логотипа добавляем блок “Меню”, устанавливаем настройки отступов
  • После меню добавляем блоки “Поиск” и "Произвольная форма" (шаблон с кнопкой)
Применение контейнера: шапка
Применение контейнера: шапка
На следующей картинке выведен составной блок, в котором присутствует два контейнера.
Вложенный контейнер
Вложенный контейнер
Первый - внешний. У него установлена компоновка  Flexbox, горизонтальная компоновка. В этом контейнере два блока: текст и контейнер. Второй, внутренний контейнер нужен для того, чтобы заголовок и список контактов выстроились вертикально, потому что, если заголовок и контакты добавить по очереди после картинки, блок контактов станет третьим блоком во внешнем контейнере, справа от заголовка.
Устройство сложного блока
Устройство сложного блока
Следующая причина для объединения блоков в контейнер - необходимость общего оформления. Например, здесь блоки “Заголовок”, “Текст” и "Контакты" объединены в контейнер, и уже для него указан цвет фона, рамка и скругление углов.
Общее оформление блоков
Общее оформление блоков
Третья причина для объединения блоков в контейнер - потребность в частом копировании. Например, какой-то удачный набор блоков вы планируете переиспользовать на вновь создаваемых страницах: копировать и менять контент. Чтобы не копировать по одному блоку, объедините их в контейнер и копируйте его.

© 1999 – 2024
ООО «НетКэт»

+7 (495) 783-60-21
+7 (495) 055-73-84

info@netcat.ru

127018, г. Москва,
ул. Сущёвский вал, 16, стр. 6