Editor X: выбор между Flex-контейнером и инструментами сетки

Editor X предлагает различные инструменты макета. Их можно использовать для организации элементов, которые служат разным целям. Эти инструменты основаны на двух распространенных технологиях CSS - сетке и Flex-контейнерах, которые важно учитывать при планировании сложных композиций.

Сетка - это двухмерная модель CSS, которую вы также можете найти в Editor X, двумя измерениями являются ее столбцы и строки. При разработке больших адаптивных макетов сетки помогают контролировать структуру элементов, когда они размещаются внутри заданных вами ячеек.

Элемент Сетка в Editor X фактически является CSS Сеткой, чтобы вы могли использовать ее для создания сложных макетов, определяя их адаптивное поведение. Вы можете выбрать количество или размер столбцов / строк для каждого размера экрана, чтобы композиция всегда была идеальной.

При настройке размера столбцов, строк и пробелов (межстрочных интервалов) вы можете использовать множество закрепленных и гибких параметров, таких как пиксели, проценты, fr и проч.

Контейнер - это самый простой инструмент для создания макетов композиции. Вы можете прикрепить элементы к этому контейнеру, чтобы он автоматически стал их родительским элементом и определял их структуру. Это отличный инструмент для создания «автономных» композиций, размер которых должен быть меньше секции.

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

Flex-контейнер - это одномерная модель CSS, которую мы используем в Editor X для большинства инструментов макета. В этих инструментах элементы автоматически настраиваются (т. е. они гибкие), чтобы соответствовать пространству в родительском элементе, будь то перенос, расширение, чтобы заполнить пространство или сжатие, чтобы вписаться в пространство.

Стек - это прозрачный flex-контейнер, который содержит элементы, размещенные по вертикали. Например, вы можете объединить несколько текстовых полей или текстовый элемент и кнопку под ним. Соединение в стек сохраняет поля между элементами и предотвращает перекрытие элементов на экранах меньшего размера.

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

Все, что вам нужно сделать, это выбрать тип отображения (например, слайдер, мозаика, столбцы), а лейаутер сделает все остальное - ваши элементы будут отлично смотреться на каждом экране. При этом вы можете выбрать другой тип отображения для каждого вьюпорта (например, макеты слайдера отлично подходят для мобильных устройств).

Репитер - это гибкий контейнер, который содержит несколько элементов в выбранном вами макете. Репитеры идеально подходят, если вы хотите, чтобы каждый элемент имел одинаковый макет и дизайн, но разное содержимое - например, списки. Настройка макета и дизайна выполняется автоматически, поэтому вам не придется беспокоиться о целостности сайта.

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

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

Нажмите ниже, чтобы узнать о некоторых ключевых различиях между инструментами лейаута в Editor X: