Дэйв Руперт с современной магией CSS который решает одну из этих классических головоломок: что происходит, когда CSS для компонента не может обрабатывать контент, который мы ему бросаем?
Конкретная ситуация возникает, когда сетка макета ожидает четное количество элементов, но вместо этого получает нечетное число. У нас остался «висячий» элемент в конце, который портит макет. Похоже, то, что нужно, это некоторые Защитный CSS и Дэйв выполняет это.
Он тянется к :has() написать изящный селектор, который вынюхивает последний элемент в сетке, содержащей нечетное количество элементов:
.items:has(.item:last-of-type:nth-of-type(odd)) .item:first-of-type { }Разбивая это:
- У нас есть родительский контейнер
.items. - Если контейнер
:has()an.itemребенок, который является последним в своем роде, - … И это
.itemслучается, что это экземпляр с нечетным номером, - … затем выберите первый
.itemэлемент этого типа и стилизуйте его!
В этом случае последний .item можно установить на всю ширину, чтобы предотвратить дыры в макете.
Если… то… CSS обладает условной логикой! На данный момент мы говорим только о поддержке Safari TP и Edge/Chrome Canary, но это довольно круто.
По счастливой случайности Темани Афиф недавно поделился секретами, которым научился во время эксперименты с неявными сетками. Используя алгоритм автоматического размещения CSS Grid, нам даже не нужно явно объявлять фиксированное количество столбцов и строк для сетки — CSS создаст их для нас, если они понадобятся!
Нет, методики Темани не являются альтернативным решением дилеммы Дэйва о «болванчиках». Но сочетая подход Темани к повторяющимся шаблонам макета сетки с защитным использованием CSS Дейвом :has(), мы получаем довольно мощную и сложную на вид сетку, легкую и способную обрабатывать любое количество элементов, сохраняя при этом сбалансированный повторяемый шаблон.
