Центр поддержки Wix
    Главная
  1. Wix Специалисты и Корпоративные решения Wix
  2. Wix Studio
  3. Использование Редактора Wix Studio
  4. Разработка сайта в Редакторе Studio
    5. Редактор Studio: Работа с расширенной сеткой CSS

Редактор Studio: Работа с расширенной сеткой CSS

7 мин. чтения
В редакторе Studio вы можете использовать расширенную сетку CSS для организации макета элементов и секций. Вы можете установить количество рядов и колонок, а также их размер с помощью расширенных параметров адаптивного измерения (например, fr, Мин./Макс, %). 
Посетите Академию Wix Studio, чтобы получить доступ к курсам, учебным пособиями и вебинарам о Wix Studio.
Содержание:

Переключение с сетки секции на сетку CSS

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

Чтобы переключиться с сетки секции на сетку CSS:

  1. Выберите соответствующую секцию в редакторе.
  2. Нажмите стрелку Открыть инспектор  в правом верхнем углу редактора.
  3. Прокрутите вниз до раздела Лейаут.
  4. Нажмите Применить рядом с Расширенная сетка CSS.
  5. Нажмите Применить.
Скриншот, показывающий возможность перейти на расширенную сетку в панели инспектора
Что дальше?
Настройте ряды, колонки и отступы в панели инспектора. Вы также можете перетаскивать линии сетки на холсте, чтобы перемещать их.  

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

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

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

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

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

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

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

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

Расположение элементов в сетке

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

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

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

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

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

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

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

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

|
В этой статье
  • Переключение с сетки секции на сетку CSS
  • Применение сетки CSS к другим элементам
  • Настройка сетки CSS
  • Расположение элементов в сетке
  • Фиксация элементов
  • Перемещение элементов между ячейками сетки
  • Таблица единиц измерения сетки