Implizite Raster, wiederholbare Layoutmuster und Danglers

Dave Rupert mit moderner CSS-Magie Das löst eines dieser klassischen Rätsel: Was passiert, wenn die CSS for-Komponente nicht in der Lage ist, den Inhalt zu verarbeiten, den wir darauf werfen?

Der spezielle Fall liegt vor, wenn ein Gestaltungsraster eine gerade Anzahl von Artikeln erwartet, aber stattdessen mit einer ungeraden Anzahl versorgt wird. Wir haben am Ende ein „baumelndes“ Element, das das Layout durcheinander bringt. Klingt wie das, was benötigt wird, ist etwas Defensives CSS und Dave schafft es.

Er greift nach :has() um einen raffinierten Selektor zu schreiben, der das letzte Element in einem Raster ausfindig macht, das eine ungerade Anzahl von Elementen enthält:

.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 Behälter :has() an .item Kind, das das letzte seiner Art ist,
• …und das .item zufällig eine ungeradzahlige Instanz ist,
• … dann wählen Sie die erste aus .item Element dieses Typs und stylen Sie es!

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

Wenn… dann… CSS hat bedingte Logikfähigkeiten! Wir sprechen im Moment nur über die Unterstützung von 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 dabei gelernt hat Experimentieren mit impliziten Gittern. Indem wir den Algorithmus für die automatische Platzierung von CSS Grid nutzen, müssen wir nicht einmal explizit eine feste Anzahl von Spalten und Zeilen für ein Raster deklarieren – CSS erstellt sie für uns, wenn sie benötigt werden!

Nein, Temanis Techniken sind keine alternativen Lösungen für Daves „Danger“-Dilemma. Aber die Kombination von Temanis Ansatz zu wiederholbaren Rasterlayoutmustern mit Daves defensivem CSS-Einsatz von :has(), erhalten wir ein ziemlich leistungsstarkes und komplex aussehendes Raster, das leicht ist und in der Lage ist, eine beliebige Anzahl von Elementen zu handhaben, während ein ausgewogenes, wiederholbares Muster beibehalten wird.