Dave Rupert met wat moderne CSS-magie dat een van die klassieke raadsels aanpakt: wat gebeurt er als de CSS voor component niet in staat is om de inhoud aan te kunnen die we erop gooien?

De specifieke situatie is wanneer een lay-outraster een even aantal items verwacht, maar in plaats daarvan een oneven aantal krijgt. We blijven achter met een "bungelend" element aan het einde dat de lay-out afwerpt. Klinkt als wat nodig is, is wat Defensieve CSS en Dave bereikt het.

Hij reikt naar :has() om een ​​handige selector te schrijven die het laatste item opsnuift in een raster dat een oneven aantal items bevat:

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

Dat opsplitsen:

• We hebben een bovenliggende container van .items.
• Als de container :has() an .item kind dat de laatste in zijn soort is,
• …en dat .item toevallig een oneven genummerd exemplaar is,
• ...selecteer dan de eerste .item element van dat type en stijl het!

In dit geval, dat laatste .item kan worden ingesteld om over de volledige breedte te gaan om gaten in de lay-out te voorkomen.

Als… dan… CSS heeft voorwaardelijke logische krachten! We hebben het momenteel alleen over ondersteuning voor Safari TP en Edge/Chrome Canary, maar dat is best gaaf.

Toevallig heeft Temani Afif onlangs trucs gedeeld die hij heeft geleerd terwijl experimenteren met impliciete rasters. Door gebruik te maken van het automatische plaatsingsalgoritme van CSS Grid, hoeven we niet eens expliciet een vast aantal kolommen en rijen voor een raster te declareren - CSS zal ze voor ons maken als ze nodig zijn!

Nee, Temani's technieken zijn geen alternatieve oplossingen voor Dave's 'dangler'-dilemma. Maar door Temani's benadering van herhaalbare rasterlay-outpatronen te combineren met Dave's defensieve CSS-gebruik van :has(), krijgen we een behoorlijk krachtig en complex ogend raster dat lichtgewicht is en in staat is om een ​​willekeurig aantal items te verwerken met behoud van een gebalanceerd, herhaalbaar patroon.