Редактор Studio: работа с расширенной сеткой CSS
7 мин.
В Редакторе Studio вы можете использовать расширенную сетку CSS для организации макета элементов и секций. Вы можете выбрать нужное количество строк и секций и задать их размер с помощью адаптивных единиц измерения (например, FR, Min/max, %).
Перейдите в Академию Wix Studio, чтобы посмотреть дополнительные вебинары, руководства и курсы Wix Studio.
Переключение с сетки раздела на сетку CSS
Секции в редакторе поставляются со встроенной сеткой разделов. Это простая в использовании версия расширенной сетки, основанная на той же логике CSS. Переход на расширенную CSS-сетку дает более точный контроль над макетом для каждого размера экрана.
Примечание:
После перехода вернуться к сетке разделов невозможно. Однако, если вы только что выполнили это действие, вы можете использовать кнопку Отменить 
в правом верхнем углу редактора.
в правом верхнем углу редактора.Чтобы переключиться с сетки раздела на сетку CSS:
- Выберите соответствующий раздел.
- Нажмите на иконку Открыть инспектор
в правом верхнем углу редактора.
- Прокрутите вниз до раздела Макет.
- Нажмите Переключить рядом с пунктом Расширенная сетка CSS.
- Нажмите Перейти на сетку CSS.
Что дальше?
Настройте строки, секции и интервалы в панели инспектора. Вы также можете перетаскивать линии сетки на холсте, чтобы переместить их.
Применение сетки CSS к другим элементам
Вы можете применить CSS-сетку к контейнеру, поп-апу, Flex-контейнеру и элементам репитера. В репитере после применения сетки к одному элементу остальные обновляются автоматически.
Применение сетки CSS:
- Выберите нужный элемент в редакторе.
- Нажмите на иконку Действия
. - Нажмите Применить расширенную сетку CSS.
- Выберите макет из выпадающего списка 1x1.
Совет: выберите Другое, если хотите установить собственное количество строк и секций.
Что дальше?
Настройте строки, секции и интервалы в панели инспектора. Вы также можете перетаскивать линии сетки на холсте, чтобы переместить их.
Настройка сетки CSS
Настройте сетку, чтобы получить именно тот макет, который вам нужен. Вы можете изменить число строк и секций, настроить их размер и разрывы между ними.
Настройка сетки CSS:
- Выберите нужный элемент или секцию.
- Выберите способ настройки сетки:
Выберите другой макет
Добавьте строки и столбцы
.
, чтобы увидеть этот параметр товара. 
Изменение размера секций или строк
Удаление колонки или строки
рядом с существующей колонкой или строкой.
Редактирование размера разрывов
Примечание:
Удалить сетку CSS из раздела невозможно. Если вы удалите все строки и секции, сетка вернется к формату 1x1.
Работа с размерами экрана:
Дизайн передается от версии для компьютеров к меньшим размерам экрана. Мы рекомендуем настраивать сетку для каждого размера экрана, чтобы композиция элементов была безупречной. В примере ниже мы установили разный макет для каждого размера экрана (3 колонки на компьютере и 3 ряда на планшете).
Размещение элементов в сетке
При добавлении элементов в сетку несколько инструментов помогут вам более точно настроить их размещение.
Фиксация элементов
Фиксация элементов по линиям сетки гарантирует, что они будут расположены именно так, как вы хотите. В Редакторе Studio все элементы фиксируются автоматически, но вы можете настроить фиксацию вручную и добавить поля.
Перемещение элементов между ячейками сетки
В разделе инспектора Положение вы можете выбрать элемент и увидеть ячейку сетки, в которой он находится. Нажмите на любую ячейку сетки, чтобы переместить туда элемент без использования перетаскивания.
Вы также можете ввести конкретные номера секций и строк, что полезно, когда нужно разместить элемент в нескольких ячейках сетки.
Таблица единиц измерения сетки
Используйте весь спектр единиц CSS для создания сетки. Вы можете установить размер секций и строк, используя проценты, фракции или пиксели. Кроме того, можно задать минимальный и максимальный размер секций и строк или использовать Calc для создания необходимой сетки.
Проценты (%)
Фракция (fr)
Авто
Пиксели (пикс.)
Ширина и высота окна просмотра (vw и vh)
Минимальный и максимальный контент
Мин./макс.
Вычисление
Что делать при наложении элементов?
Посмотрите видео по устранению неполадок, чтобы узнать, что проверить и как решить эту проблему.