Редактор Studio Two: работа с ячейками и сетками

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

Содержимое Инспектора зависит от текущей сетки секции:

• Если сетка секции состоит только из одной ячейки, в разделе Выбрать макет можно выбрать макет с большим количеством ячеек.

• Если сетка состоит из нескольких ячеек, откройте раскрывающийся список Изменить макет и выберите макет: Строки, Столбцы, Коллаж или Карточки.
  Примечание: доступные макеты зависят от количества ячеек в сетке секции. Например, макет «Карточки» доступен только для сеток с четырьмя ячейками.
  
  

Расширьте сетку, если для макета нужна еще одна ячейка. Вы можете выбрать, с какой стороны сетки ее добавить.

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

Чтобы удалить ячейку, нажмите ее правой кнопкой мыши в рабочей области и выберите Удалить или нажмите клавишу Delete на клавиатуре. При этом также будут удалены все элементы в этой ячейке.

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

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

Полезно знать:

Ячейки также можно разделять, нажимая те же значки на панели действий.

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

1. Нажмите первую ячейку.

2. Удерживая клавишу Shift, нажмите вторую ячейку.

3. Нажмите Объединить или Поменять местами на панели действий.
   
   

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

В Инспекторе выберите нужный вариант рядом с пунктом Настроить сетку:

• Выровнять секции : установить одинаковую ширину всех секций.

• Выровнять строки : установить одинаковую высоту всех строк.

• Перевернуть секции : изменить порядок секций на обратный.

• Перевернуть строки : изменить порядок строк на обратный.
  
  

Полезно знать:

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

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

Если в секции больше одной ячейки, сначала выберите нужную ячейку. Затем откройте раскрывающееся меню Вертикальный интервал и выберите Вручную. Чтобы снова поручить настройку размеров редактору, выберите Автоматически.

Примечание:

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

Измените расположение ячеек в сетке, выбрав новый вариант в раскрывающемся меню Макет. Список доступных макетов зависит от текущего количества строк и столбцов и предлагает разные варианты их расположения.

Полезно знать:

Это также можно сделать на панели действий. Нажмите раскрывающееся меню Макет, где указан текущий размер сетки, например 2 × 2, и выберите новый вариант.

Задайте размер каждой строки и столбца в подходящих единицах измерения.

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

2. Укажите размер и единицу измерения рядом с номером нужной строки или столбца.
   
   
   

Полезно знать:

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

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

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

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

3. Выберите нужное действие:

   • Столбец: Добавить столбец слева, Добавить столбец справа или Удалить столбец.

   • Строка: Добавить строку выше, Добавить строку ниже или Удалить строку.
     
     

Полезно знать:

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

• Нельзя удалить последнюю строку или последний столбец сетки. Если осталась только одна строка или один столбец, действие Удалить столбец / Удалить строку недоступно.

Задайте расстояние между строками и столбцами. Введите нужные значения рядом с параметром Отступы и нажмите текущую единицу измерения, чтобы выбрать другую. Например, вместо пикс.* можно выбрать vw, если это удобнее.

Для горизонтального и вертикального отступов можно использовать одинаковые или разные единицы измерения.

Переместите элемент или растяните его на несколько ячеек, не перетаскивая по холсту.

1. Выберите элемент, который хотите переместить.

2. В Инспекторе прокрутите вниз до раздела Положение.

3. Нажмите нужную ячейку в разделе Расположение в ячейках сетки.
   Совет: чтобы растянуть элемент на несколько ячеек, удерживайте клавишу Shift и нажмите ячейку, до которой хотите его растянуть.
   
   

Сетка секции вмещает не более 16 ячеек. Когда этот предел достигнут, кнопка Добавить ячейку становится недоступна.

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

Нет. Чтобы самостоятельно настроить высоту строк в сетке секции, выберите Вручную в настройке Вертикальный интервал.

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