Unregelmäßig geformte Links mit Subgrid

Avatar of Chris Coyier
Chris Coyier am

DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!

Michelle Barker behandelt eine Situation, in der Sie versetzt angeordnete Rechtecke als Teil eines klickbaren Bereichs benötigen. Das Schwierige daran ist, dass *nur* die Rechtecke klickbar sein sollen. Das schließt die Verwendung eines übergeordneten Elements aus und das gesamte größere umschließende Rechteck klickbar zu machen, was ein gängiges (aber ebenso schwierig) Muster ist.

Ein Rechteck mit absoluter Positionierung außerhalb der Grenzen des verlinkten Rechtecks zu platzieren, könnte funktionieren, aber Michelle wählt hier einen Weg, bei dem alles in einem Grid angeordnet wird und dann pointer-events verwendet werden, um die Klickbereiche genau richtig zu machen. Fühlt sich für mich robuster an.

Noch ein gutes Beispiel dafür, warum wir Subgrid überall und sofort brauchen.

Direkter Link →