Irregular-Shaped Links with Subgrid
Michelle Barker tackles a common interface challenge: making offset rectangles part of a clickable area without turning the whole surrounding box into a link. Wrapping the elements in a parent and making that larger rectangle clickable is the usual workaround, but that approach comes with its own set of problems.
Instead of relying on absolute positioning to push one rectangle outside the bounds of its linked sibling, Barker lays everything out on a grid and then uses the pointer-events property to fine-tune exactly which regions respond to clicks. The result is a more robust solution where only the intended shapes are interactive.
The technique serves as yet another demonstration of why subgrid support in browsers is sorely needed.



