В Редакторе Studio вы можете использовать расширенную сетку CSS для организации макета элементов и секций. Вы можете выбрать необходимое число строк и секций и задать их размер, используя адаптивные единицы измерения (например, FR, Min/max, %).

Перейдите в Академию Wix Studio, чтобы посмотреть дополнительные вебинары, руководства и курсы Wix Studio.

Переход от сетки раздела к CSS-сетке

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

Примечание:

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

в правом верхнем углу редактора.

Чтобы перейти от сетки раздела к CSS-сетке:

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

Скриншот открытия панели инспектора в Редакторе Studio.

Прокрутите вниз до раздела Макет.
Нажмите Переключить рядом с пунктом Расширенная CSS-сетка.
Нажмите Перейти на CSS-сетку.

Скриншот, показывающий возможность перехода на расширенную сетку в панели инспектора

Что дальше?

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

Применение CSS-сетки к другим элементам

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

Чтобы применить CSS-сетку:

Выберите нужный элемент в редакторе.
Нажмите на иконку Другие действия .
Нажмите Применить расширенную сетку CSS.
Выберите макет из выпадающего списка 1x1.
Совет: выберите Другое, если хотите установить собственное число строк и секций.

Скриншот, показывающий выпадающий список, в котором можно выбрать другой макет

Что дальше?

Настройка CSS-сетки

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

Чтобы настроить CSS-сетку:

Выберите нужный элемент или раздел.
Выберите способ настройки сетки:

Выберите другой макет

Добавление строк и колонок

Изменение размера секций или строк

Удаление колонки или строки

Редактирование размера отступов

Примечание:

Удалить сетку CSS из раздела невозможно. Если вы удалите все строки и секции, сетка вернется к формату 1x1.

Работа с размерами экранов:

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

Размещение элементов в сетке

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

Фиксация элементов

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

GIF-изображение, показывающее, как изменить точки фиксации элемента в ячейке сетки

Перемещение элементов между ячейками сетки

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

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

GIF-изображение, показывающее, как нажимать на другие ячейки в Инспекторе, чтобы быстро перемещать элементы между ними

Таблица единиц измерения сетки

Используйте весь спектр единиц CSS для создания сетки. Вы можете установить размер секций и строк, используя проценты, фракции или пиксели. Кроме того, можно задать минимальный и максимальный размер секций и строк или использовать Calc для создания необходимой сетки.

Проценты (%)

Фракция (fr)

Авто

Пиксели (пикс.)

Ширина и высота области просмотра (vw и vh)

Минимальное и максимальное содержимое

Мин./макс.

Вычисление

Что делать при наложении элементов?

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

Была ли статья полезна?

Helpmate

Привет,

Нужны дополнительные рекомендации?

Краткое содержание этой статьи

Unlock personalized helpLog in to get the most out of Helpmate.