Перемещение элементов в CSS Grid Layout [Руководство]
С использованием Модуль CSS Grid Layout в веб-дизайне становится все более и более осуществимым, так как все больше браузеров начинают поддержать это. При создании макетов, заполняющих ячейки сетки, может наступить момент, когда вы захотите достичь более сложных вещей.
Например, вы можете захотеть немного двигаться некоторые элементы сетки застряли в их областях сетки. Вы также можете захотеть переместить их из контейнера сетки (переполнение) или друг над другом (перекрытие) или просто ... в какое-то пустое пространство вокруг.
Итак, в этом посте я покажу вам, как вы можете элементы сетки перемещения, порядка, переполнения, наложения и размера когда вы используете модуль CSS Grid Layout.
Создать сетку CSS
Во-первых, давайте создадим простую CSS-сетку с один ряд и три столбца.
В HTML мы создаем кучу div, где контейнер сетки содержит три элемента сетки.
В CSS контейнер сетки имеет дисплей: сетка; имущество и элементы сетки иметь Сетка-зона который идентифицирует имена областей элемента сетки.
Мы тоже добавить Сетка-шаблон-зона имущество к контейнеру сетки, в котором имена областей сетки используются для назначить области сетки ячейкам сетки, которые они представляют.
Все столбцы взять размер одной дроби (фр) ширины контейнера, обеспечивая содержание элементов сетки.
.grid-container display: grid; области шаблона сетки: 'левый центр, правый'; grid-template-columns: repeat (3, 1fr); сетка-шаблон-строки: 80px; разрыв сетки: 5 пикселей; ширина: 360px; цвет фона: пурпурный; .grid-left grid-area: left; .grid-center grid-area: center; .grid-right grid-area: right; .grid-container div background-color: lightgreen;
Элементы сетки переполнения
Вы можете сделать элемент сетки переполнить сетку контейнера если это необходимо для макета. Чтобы добиться эффекта переполнения, вам просто нужно использовать другой размер столбца:
.grid-container display: grid; области шаблона сетки: 'левый центр, правый'; grid-template-columns: repeat (3, 150px); разрыв сетки: 5 пикселей;
сумма размера столбца и разрыва больше чем ширина контейнера, что приводит к тому, что элементы сетки переполняют их контейнер.
Элементы сетки перекрытия
элемент сетки может перекрываться (полностью или частично крышка) другой элемент сетки в следующих случаях:
- Это установлено, чтобы охватить (и более) ячейки (я) другого элемента сетки.
- Его размер был увеличен, в результате чего он перекрывается с ближайшим элементом сетки.
- Он переместился поверх другого элемента сетки.
Мы обсудим второй и третий случаи позже, в “Определение размеров” а также “перемещение” разделы.
Во-первых, давайте посмотрим на первый случай, когда элемент сетки распространяется через другой.
Элемент сетки в центре имеет охватил левую, поэтому на экране видны только два объекта.
.grid-center grid-area: center; сетка-столбец: 1/3;
Сетка-колонки а также Сетка-строка свойства назначить линии сетки между которыми должен помещаться столбец или строка.
На диаграмме ниже вы можете увидеть, как Сетка-столбец: 1/3 Правило CSS работает: центральная колонна промежутки между линиями сетки 1 и 3. В результате центральный столбец перекрывает левый.
Переместить элементы сетки
Двигаясь, я имею в виду слегка перемещая предметы. Если вы полностью хотите переместить элемент в другую ячейку / область сетки, я рекомендую обновить код создания сетки.
Перемещаться по элементам сетки просто. Просто использовать поле, преобразование, или позиция: относительная; свойства. Ниже показано, как элементы перемещаются с использованием этих свойств..
Центральные и правые элементы сетки можно перемещать (как показано выше) следующими способами:
1. Использование поле
Отрицательные поля увеличивают размеры элементов сетки, в то время как положительные поля обрезают их. Используя комбинацию обоих, вы можете слегка перемещать элементы сетки вокруг.
.grid-center grid-area: center; поле слева: -10px; поле справа: 10 пикселей; margin-top: -10px; нижнее поле: 10 пикселей; .grid-right grid-area: right; поле слева: 10 пикселей; Поля справа: -10px; margin-top: -10px; нижнее поле: 10 пикселей;
2. Использование преобразование
переведите() Функция CSS перемещает элемент вдоль осей X и Y. Используя его вместе с преобразование свойство позволяет изменить положение элемента сетки.
.grid-center grid-area: center; transform: translate (-10px, -10px); .grid-right grid-area: right; transform: translate (10px, -10px);
3. Использование позиция
С использованием положение: относительное; правило с указанным Топ, низ, оставил, а также право свойства могут быть использованы для перемещения элементов сетки.
.grid-center grid-area: center; положение: относительное; низ: 10 пикселей; справа: 10 пикселей; .grid-right grid-area: right; положение: относительное; низ: 10 пикселей; слева: 10 пикселей;
Элементы сетки заказа
Элементы сетки отображаются на экране в порядке их появления в исходном коде HTML.
В предыдущем разделе, когда центральный элемент был перемещен влево, он был помещен поверх левого элемента браузером. Это произошло потому, что в HTML, Тем не менее, мы можем изменить элементы сетки заказа с использованием С использованием Как и в модуле CSS Grid Layout, изменение порядка элементов в HTML не влияет на расположение сетки, Вы также можете положить Если вы используете авторазмер строки или столбцы для элемента сетки (используя Помните, что в нашем примере сетки все три столбца занимают одну дробь ( Здесь мы меняем размер левого элемента с использованием Здесь мы меняем размер левого элемента с использованием Z-индекс или порядок Свойства CSS.
z-индекс: 1; Правило, левый элемент сетки получил более высокий контекст стека.. grid-left grid-area: left; z-индекс: 1;
Размер сетки элементов
авто, фр, гр единиц), он будет уменьшаться, чтобы освободить место для соседнего элемента, который увеличился в размере только если указанный предмет не был измерен преобразование или отрицательная маржа.фр) контейнера сетки. Посмотрите, как выглядят все три элемента после изменения размера левого, двумя различными способами..1. Размер с
ширина а также ростширина а также рост свойства. В результате он остается внутри контейнера сетки.
.grid-left grid-area: left; ширина: 200 пикселей; высота: 90 пикселей;
2. Размер с
преобразованиепреобразование имущество. В результате он переполняет контейнер, и разрыв сетки также исчезает.
.grid-left grid-area: left; преобразование: шкала (1,8);
