Implizite Grids, wiederholbare Layout-Muster und Danglers

Dave Rupert mit etwas modernem CSS-Zauber, das sich mit einem dieser klassischen Rätsel befasst: Was passiert, wenn die CSS für eine Komponente den Inhalt, den wir ihr zumuten, nicht verarbeiten kann?

Die spezifische Situation ist, wenn ein Layout-Grid eine gerade Anzahl von Elementen erwartet, aber stattdessen eine ungerade Anzahl erhält. Uns bleibt ein „dangler“-Element am Ende, das das Layout durcheinanderbringt. Es klingt, als ob hier etwas Defensive CSS benötigt wird, und Dave erledigt das.

Er greift zu :has(), um einen pfiffigen Selektor zu schreiben, der das letzte Element in einem Grid mit einer ungeraden Anzahl von Elementen erspäht.

.items:has(.item:last-of-type:nth-of-type(odd)) .item:first-of-type { }

Das aufschlüsseln

• Wir haben einen übergeordneten Container von .items.
• Wenn der Container :has() ein .item-Kind hat, das das letzte seiner Art ist,
• …und dieses .item zufällig eine ungerade nummerierte Instanz ist,
• …dann wähle das erste .item-Element dieser Art aus und style es!

In diesem Fall kann das letzte .item auf volle Breite gesetzt werden, um Löcher im Layout zu vermeiden.

Wenn… dann… CSS hat bedingte Logik! Wir sprechen im Moment nur über die Unterstützung für Safari TP und Edge/Chrome Canary, aber das ist ziemlich großartig.

Wie es der Zufall will, hat Temani Afif kürzlich Tricks geteilt, die er beim Experimentieren mit impliziten Grids gelernt hat. Indem wir den Auto-Placement-Algorithmus von CSS Grid nutzen, müssen wir nicht einmal explizit eine feste Anzahl von Spalten und Zeilen für ein Grid deklarieren – CSS erstellt sie für uns, wenn sie benötigt werden!

Nein, Temanis Techniken sind keine alternativen Lösungen für Daves „Dangler“-Dilemma. Aber durch die Kombination von Temanis Ansatz für wiederholbare Grid-Layout-Muster mit Daves defensivem CSS-Einsatz von :has() erhalten wir ein ziemlich leistungsstarkes und komplex aussehendes Grid, das leichtgewichtig ist und jede Anzahl von Elementen handhaben kann, während ein ausgewogenes, wiederholbares Muster beibehalten wird.