Implicit Grids, Repeatable Patterns, and the “Dangler” Problem

Dave Rupert has cooked up a neat bit of modern CSS to handle a classic layout headache: what do you do when a component’s CSS can’t adapt to the content it receives? The specific pain point is a grid designed for an even number of items that instead gets an odd count, leaving a “dangling” element that breaks the visual rhythm. It’s a job for Defensive CSS, and Rupert delivers.

His answer leans on :has() to craft a selector that can detect the last item in a grid containing an odd number of children:

.items:has(.item:last-of-type:nth-of-type(odd)) .item:first-of-type { }
  • The parent container is .items.
  • If that container :has() an .item child that is the last of its type,
  • …and that .item is an odd-numbered instance,
  • …then target the first .item of that type and apply styling.

That final dangling .item can then be told to span the full width, patching over the otherwise awkward hole in the layout. If… then… — conditional logic right inside CSS! Support is currently limited to Safari Technology Preview and Edge/Chrome Canary, but that’s still an exciting prospect.

Coincidentally, Temani Afif has been sharing tricks from his experiments with implicit grids. By leaning on CSS Grid’s auto-placement algorithm, you don’t have to lock in a fixed set of columns and rows — the browser will generate them on the fly. Temani’s methods aren’t direct alternatives to Rupert’s approach, but when you fuse his repeatable grid patterns with Rupert’s defensive :has() styling, you end up with a robust-looking grid that stays lightweight and handles any number of items while preserving a balanced, repeating structure.