Editor X: Использование сеток

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

У каждой секции и контейнера есть встроенная сетка размером 1x1, которую вы можете настроить. Переключитесь на другой макет одним щелчком мыши или создайте собственную сетку, перетащив линии внутрь текущей композиции. 

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

При добавлении элементов и размещении их по сетке вам доступны различные инструменты, которые помогут создать адаптивный макет:

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

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

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

Вы можете использовать разные единицы измерения CSS для создания сетки. Можно устанавливать размер колонок и рядов в процентах, пикселях или фракциях (долях целого). Вы также можете задать минимальный и максимальный размер колонок и рядов и даже применять вычисления для создания сетки нужных размеров.