Перемещение элементов в CSS Grid Layout [Guide]

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

Например, вы можете слегка перемещаться по элементам сетки, застрявшим в их областях сетки. Вы также можете захотеть переместить их из контейнера сетки (переполнение) или друг над другом (перекрытие), или просто … в какое-то пустое пространство вокруг.

Читайте также: Введение в модуль CSS Grid Layout

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

Итак, в этом посте я покажу вам, как вы можете перемещать, упорядочивать, переполнять, перекрывать и измерять элементы сетки при использовании Модуль CSS Grid Layout,
Создать сетку CSS
Во-первых, давайте создадим простую CSS-сетку с одной строкой и тремя столбцами.
В HTML мы создаем группу элементов div, в которых контейнер сетки содержит три элемента сетки.

В CSS контейнер сетки имеет отображение: grid; свойство и элементы сетки имеют Сетка-зона который идентифицирует имена областей элемента сетки.

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

Все столбцы принимают размер одной фракции (fr) от ширины контейнера, обеспечивая содержание элементов сетки.

.grid-container {
  дисплей: сетка;
  области шаблона сетки: ‘левый центр, правый’;
  grid-template-columns: repeat (3, 1fr);
  сетка-шаблон-строки: 80px;
  разрыв сетки: 5 пикселей;
  ширина: 360px;
  цвет фона: пурпурный;
}
.grid-left {
  область сетки: слева;
}
.grid-center {
  область сетки: центр;
}
.grid-right {
  площадь сетки: справа;
}
.grid-container div {
  цвет фона: светло-зеленый;
}

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

.grid-container {
  дисплей: сетка;
  области шаблона сетки: ‘левый центр, правый’;
  grid-template-columns: repeat (3, 150px);
  разрыв сетки: 5 пикселей;
}

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

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

Мы обсудим второй и третий случаи позже, в разделах «Размеры» и «Перемещение».

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

.grid-center {
область сетки: центр;
сетка-столбец: 1/3;
}

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

На диаграмме ниже вы можете увидеть, как работает CSS-правило grid-column: 1/3: центральный столбец располагается между линиями сетки 1 и 3. В результате центральный столбец перекрывает левый.
Переместить элементы сетки
Под перемещением я подразумеваю перемещение предметов слегка вокруг. Если вы полностью хотите переместить элемент в другую ячейку / область сетки, я рекомендую обновить код создания сетки.

Перемещаться по элементам сетки просто. Просто используйте поле, преобразование или позицию: относительный; свойства. Ниже показано, как элементы перемещаются с использованием этих свойств.
Центральные и правые элементы сетки можно перемещать (как показано выше) следующими способами:
1. Использование маржи
Отрицательные поля увеличивают размеры элементов сетки, в то время как положительные поля обрезают их. Используя комбинацию обоих, вы можете слегка перемещать элементы сетки вокруг.

.grid-center {
  область сетки: центр;
  поле слева: -10px;
  поле справа: 10 пикселей;
  margin-top: -10px;
  нижнее поле: 10 пикселей;
}
.grid-right {
  площадь сетки: справа;
  поле слева: 10 пикселей;
  Поля справа: -10px;
  margin-top: -10px;
  нижнее поле: 10 пикселей;
}

Использование преобразования
перевести() Функция CSS перемещает элемент вдоль осей X и Y. Использование его вместе со свойством transform позволяет изменять положение элемента сетки.

.grid-center {
  область сетки: центр;
  transform: translate (-10px, -10px);
}
.grid-right {
  площадь сетки: справа;
  transform: translate (10px, -10px);
}

Используя положение
Используя положение: относительный; Правило с указанными свойствами top, bottom, left и right также можно использовать для перемещения по элементам сетки.

.grid-center {
  область сетки: центр;
  положение: относительное;
  низ: 10 пикселей;
  справа: 10 пикселей;
}
.grid-right {
  площадь сетки: справа;
  положение: относительное;
  низ: 10 пикселей;
  слева: 10 пикселей;
}

Элементы сетки заказа
Элементы сетки отображаются на экране в порядке их появления в исходном коде HTML.

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

div class=’grid-center’> идет после

div class=’grid-left’>следовательно, центральный элемент отображается после (и более) левого.
Тем не менее, мы можем изменить элементы сетки заказа, используя Z-индекс или приказ Свойства CSS.
Используя z-index: 1; Правило, левый элемент сетки получил более высокий контекст стека.
,
Сетка левый {
область сетки: слева;
z-индекс: 1;
}

Как и в модуле CSS Grid Layout, изменение порядка элементов в HTML не влияет на макет сетки, вы также можете поместить

div class=’grid-center’> перед

div class=’grid-left’> в HTML. Но делайте это только в том случае, если обновленный HTML-код не влияет на доступность.
Размер сетки элементов
Если вы используете строки или столбцы автоматического размера для элемента сетки (используя единицы auto, fr, gr), он будет уменьшаться, чтобы освободить место для соседнего элемента, который увеличился в размере только если указанный элемент не был измерен путем преобразования или отрицательного поля.

Помните, что в нашей выборочной сетке все три столбца занимают одну долю (fr) контейнера сетки. Посмотрите, как выглядят все три элемента после изменения размера левого двумя разными способами.
1. Размер с шириной и высотой
Здесь мы меняем размер левого элемента, используя свойства width и height. В результате он остается внутри контейнера сетки.

.grid-left {
  область сетки: слева;
  ширина: 200 пикселей;
  высота: 90 пикселей;
}

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

.grid-left {
область сетки: слева;
преобразование: шкала (1,8);
}