Michelle Barker covers a situation where you need offset rectangles part of a clickable area. The tricky part is having just the rectangles be clickable. That rules out using some parent element and making the whole larger encompassing rectangle clickable, which is a common (but equally tricky) pattern.

Kicking one rectangle outside the bounds of the linked one with absolute positioning could work, but Michelle takes a path here that lays everything out on a grid, then uses pointer-events to get the click areas just right. Feels more robust to me.

Yet another good example of why we need subgrid everywhere, stat.

Direct Link to ArticlePermalink

The post Irregular-shaped Links with Subgrid appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.