Dave Rupert with some trendy CSS magic that tackles a type of traditional conundrums: what occurs when the CSS for part is unable to deal with the content material we throw at it?
The precise state of affairs is when a structure grid expects a good variety of gadgets, however is equipped with an odd quantity as an alternative. We’re left with a “dangling” aspect on the finish that throws off the structure. Seems like what’s wanted is a few Defensive CSS and Dave accomplishes it.
He reaches for :has() to jot down a nifty selector that sniffs out the final merchandise in a grid that accommodates an odd variety of gadgets:
.gadgets:has(.merchandise:last-of-type:nth-of-type(odd)) .merchandise:first-of-type { }Breaking that down:
- We now have a dad or mum container of
.gadgets. - If the container
:has()an.merchandiselittle one that’s the final of its kind, - …and that
.merchandiseoccurs to be an odd-numbered occasion, - …then choose the primary
.merchandiseaspect of that kind and magnificence it!
On this case, that final .merchandise may be set to go full-width to forestall holes within the structure.
If… then… CSS has conditional logic powers! We’re solely speaking about help for Safari TP and Edge/Chrome Canary in the intervening time, however that’s fairly superior.
As probability has it, Temani Afif lately shared methods he discovered whereas experimenting with implicit grids. By profiting from CSS Grid’s auto-placement algorithm, we don’t even need to explicitly declare a set variety of columns and rows for a grid — CSS will create them for us in the event that they’re wanted!
No, Temani’s methods aren’t various options to Dave’s “dangler” dilemma. However combining Temani’s method to repeatable grid structure patterns with Dave’s defensive CSS use of :has(), we get a fairly highly effective and complex-looking grid that’s light-weight and able to dealing with any variety of gadgets whereas sustaining a balanced, repeatable sample.
