Dave Rupert with some fashionable CSS magic that tackles a type of basic conundrums: what occurs when the CSS for element is unable to deal with the content material we throw at it?
The precise scenario is when a format grid expects an excellent variety of gadgets, however is provided with an odd quantity as a substitute. We’re left with a “dangling” component on the finish that throws off the format. 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:
Now we have a guardian container of .gadgets.If the container :has() an .merchandise youngster that’s the final of its kind,…and that .merchandise occurs to be an odd-numbered occasion,…then choose the primary .merchandise component of that kind and magnificence it!
On this case, that final .merchandise will be set to go full-width to forestall holes within the format.
If… then… CSS has conditional logic powers! We’re solely speaking about assist for Safari TP and Edge/Chrome Canary in the meanwhile, however that’s fairly superior.
As probability has it, Temani Afif not too long ago shared tips he realized whereas experimenting with implicit grids. By making the most of CSS Grid’s auto-placement algorithm, we don’t even must explicitly declare a hard and fast variety of columns and rows for a grid — CSS will create them for us in the event that they’re wanted!
No, Temani’s strategies aren’t different options to Dave’s “dangler” dilemma. However combining Temani’s strategy to repeatable grid format 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.
Implicit Grids, Repeatable Format Patterns, and Danglers initially revealed on CSS-Tips. You need to get the publication.
Subscribe to MarketingSolution.
Receive web development discounts & web design tutorials.
Now! Lets GROW Together!