От автора: знаете ли вы, что вы можете использовать отрицательные номера линий, чтобы позиционировать в CSS Grid элементы сетки? Я не делал этого до недавнего времени — точнее, я не думал об этом, так как никогда не чувствовал, что мне это нужно.
Но после того, как я написал статью об относительном позиционировании элементов сетки, у меня в голове застряло, что отрицательные линии могут быть полезными.
Если вы поместите элемент сетки, используя номер линии с положительным значением, если эта строка еще не существует (потому что в вашей сетке недостаточно треков), то будут создаваться неявные треки.
Неявные треки, созданные по оси столбцов, помещая элемент за пределы явно определенной сетки
Это полезно, потому что нам не нужно определять точное количество треков, если мы не знаем, сколько элементов сетки мы будем размещать. Примером этого может служить лента новостей или галерея изображений с динамическим контентом. Мы можем контролировать размер этих неявных треков, используя свойства grid-auto-columns и grid-auto-rows.
Я ожидал, что при размещении элементов с отрицательными номерами линий, неявные треки будут создаваться в обратном направлении — это будут треки над явно заданными треками сетки по оси линий или слева по оси столбцов (если используется режим записи по умолчанию слева направо, который определяет поток содержимого сетки). То, что на самом деле происходит, более интересно и, вероятно, гораздо более полезно.
Представьте, что у меня есть сетка с четырьмя явными треками по каждой оси, определенная так:
.grid { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 200px);
}Я могу разместить такой элемент (используя сокращение для grid-column-start / grid-column-end — свойство grid-column):
.item { grid-column: -1 / span 3;
}Вместо того, чтобы начинать две линии сетки до линии 1, элемент помещается в самую последнюю линию сетки.
Элемент помещается, начиная с линии сетки -1, генерируя неявные треки
В этом примере я использую Grid inspector в инструментах для разработчиков Firefox, который, кстати, показывает отрицательные номера линий сетки, а также положительные. Если я поместил элемент, начинающийся с линии сетки -2, он запустит одну линию сетки от последней, -3 будет в 2 линиях сетки от последней и т. д.
Эта сетка имеет четыре трека, то есть пять линий сетки, если мы игнорируем любые неявные треки. Но мы могли бы поместить элемент, используя отрицательное число, большее, чем доступные, что создавало бы неявные треки в другом направлении:
.item { grid-column: -8 / span 3;
}
Элемент, помещенный начиная с линии сетки -8, генерируя неявные треки влево
Обратите внимание: поскольку мы создаем неявные треки слева, первый элемент сетки теперь помещается в первый неявный трек, а не в явную сетку. Это связано с тем, что я явно не размещал другие элементы сетки, поэтому они автоматически помещаются в первые доступные ячейки.
Для чего это можно использовать?
Использование отрицательных линий сетки позволяет размещать элементы относительно конца сетки. Это особенно полезно, если у нас есть большая сетка — это означает, что нам не нужно рассчитывать точный номер строки с самого начала, мы могли бы просто разместить ее с конца. Например, в сетке с 24 столбцами мы можем поместить элемент с использованием конечной строки следующим образом:
.item { grid-column: span 8 / 24;
}Нам нужно помнить, что 24-я линия находится в одной линии от конца. Но, возможно, следующий код будет несколько более интуитивно понятен:
.item { grid-column: span 8 / -2;
}Это может быть особенно полезно, когда речь идет о центрировании элементов в сетке. Если мы знаем, что элемент должен быть равным числу треков с начала и до конца сетки, нам нужно только установить конечную линию как отрицательный эквивалент начальной строки:
.item { grid-column: span 2 / -2;
}Если нам нужно увеличить размер сетки в разных контрольных точках, но элемент сетки по-прежнему должен быть центрирован, когда мы разместили его с помощью отрицательных номеров линий, мы не обязательно должны по новой размещать его. Например, в этой сетке с 12 столбцами, которая становится сеткой с 16 столбцами на больших контрольных точках, элемент, который я размещаю в сетке, по-прежнему начинается и заканчивается на том же количестве треков сетки, независимо от того, сколько столбцов сетка содержит:
.grid { grid-template-columns: repeat(12, 1fr);
} .item { grid-column: span 2 / -2;
} @media (min-width: 60em) { .grid { grid-template-columns: repeat(16, 1fr); }
}Вот полная демо-версия, в которой несколько элементов размещаются с помощью отрицательных номеров линий:
Бонус
Этот метод центрирования элементов также хорошо подходит для работы с переменными CSS. Мы можем установить начальную линию как переменную, а конечная линия рассчитывается как эквивалентное отрицательное значение:
.item { --start: 4; --end: calc(var(--start) * -1); grid-column: var(--start) / var(--end);
}Если нам нужно изменить начальную и конечную линии на определенных контрольных точках, все, что нам нужно сделать, это обновить одно значение. Отлично!
Автор: Michelle Barker
Источник: https://css-irl.info/
Редакция: Команда webformyself.