Irregular-shaped Hyperlinks with Subgrid

Card-based UIs are commonly-used internet design patterns, and it’s commonplace to construct a UI that requires a hover (or focus) impact to be utilized to a complete card. There are a number of methods for implementing this impact utilizing CSS, and this CSS Methods article covers a few of them. (None of them is ideal, and so they all have their pitfalls!)

However what if our hyperlink hover impact must have an effect on a lot of youngster gadgets, and so they don’t all sit neatly inside a rectangle, like a daily card?

With CSS Grid, we will lay gadgets out on a horizontal and a vertical axis, as a way to construct visually fascinating layouts, like this one:

By turning on the the Grid inspector in Firefox’s dev instruments, we will see how the gadgets of a kind of parts are laid out on the grid:

If, in our UI design, these grid gadgets must act as hyperlinks, then it could make sense for a hover impact can be utilized to all the grid gadgets each time one of them is hovered.

That’s no downside if we hover over the primary merchandise: we will use the normal sibling combinator to use the hover impact to the following gadgets.

.grid__img:hover ~ .grid__caption,
.grid__img:focus ~ .grid__caption {
  /* Hover and focus kinds */
}

However, sadly, the final sibling combinator solely impacts successive siblings, not these previous. If we hover over the second merchandise, the hover impact will not be utilized to the primary.

Absolute positioning

A greater possibility could be to make use of an absolute-positioned hyperlink to cowl the whole space of the element. As soon as once more, we will apply the hover impact utilizing the final sibling combinator, however this time we’re guaranteeing that all the grid gadgets will observe the anchor hyperlink and due to this fact have the hover impact utilized:

<div class="grid">
  <a href="/" class="grid__link"></a>
  <div class="grid__img">
    <img src="/..." alt="" />
  </div>
  <div class="grid__card">
    <h2>Eu scelerisque felis</h2>
    <p>
      Ut enim advert minim veniam, quis nostrud exercitation ullamco laboris ni ut
      aliquip ex ea commodo consequat.
    </p>
    <span>Learn extra→</span>
  </div>
</div>

.grid {
  place: relative;
  show: grid;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
}

.grid__link {
  place: absolute;
  show: grid;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
}

Positioning with Grid

With grid we don’t really want absolute positioning right here. As a substitute, we will place it as a grid merchandise that spans the complete column and row axes. We’ll want to make use of z-index to make sure it’s at all times on high:

.grid__link {
  grid-area: 1 / 1 / -1 / -1;
  show: grid;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  z-index: 1;
}

Accessibility

That is arguably a greater possibility for accessibility, because it signifies that as an alternative of getting three totally different hyperlinks all going to the identical URL, we will simply use one. However we have to be certain that the hyperlink shall be introduced accurately to assistive applied sciences.

Through the use of aria-labelledby we can provide our hyperlink an accessible label that corresponds to the element heading. We might additionally use aria-hidden to make sure that the heading isn’t introduced a second time.

<div class="grid">
  <a href="/" class="hyperlink" aria-labelledby="title"></a>
  <div class="grid__img">
    <img src="/..." alt="" />
  </div>
  <div class="grid__card">
    <h2 id="title" aria-hidden="true">Eu scelerisque felis</h2>
    <p>
      Ut enim advert minim veniam, quis nostrud exercitation ullamco laboris nisi ut
      aliquip ex ea commodo consequat.
    </p>
    <span>Learn extra→</span>
  </div>
</div>

This works accurately when examined utilizing VoiceOver in Safari.

However…it doesn’t remedy the issue

The issue right here is that wherever we hover inside the bounding field of our anchor hyperlink, the hover impact shall be utilized. However visually, in case you’re hovering over whitespace, you most likely don’t need the element to behave as if it’s being hovered. It simply doesn’t make quite a lot of sense.

What we truly need is for our hyperlink to behave as if it’s formed like this:

Nested grids to the rescue

Now we’ll see one more reason why CSS Grid is the perfect alternative for laying out this element. By making the absolute-positioned anchor hyperlink a grid container that matches the element grid, we will overlay the grid gadgets with pseudo-elements. If we add pointer-events: none to the anchor hyperlink itself, and pointer-events: auto to the pseudo-elements, the hover impact will solely be utilized when these areas are hovered.

.grid__link {
  pointer-events: none;
}

.grid__link::earlier than,
.grid__link::after {
  pointer-events: auto;
}

An imperfect answer

This system works nicely sufficient, so long as we will be more-or-less positive of the scale of the resolved grid gadgets. If we’re counting on our grid tracks to be intrinsically sized (primarily based on the size or dimensions of the content material), then the absolute-positioned pseudo-elements might not align accurately with our authentic grid gadgets.

On this instance, the primary grid merchandise incorporates an extended paragraph of content material, which makes the auto-sized grid row a lot taller:

Sadly, the gadgets within the second grid (the anchor hyperlink) aren’t conscious of the unique grid kids, in order that they don’t reply accordingly.

A greater answer with Subgrid

That is the place subgrid comes into play to resolve our downside. Subgrid is a part of the CSS Grid Degree 2 specification. It permits us to create a grid container inside a father or mother grid that inherits the father or mother grid on the column or row axis (or each).

We will, in flip, make that anchor hyperlink a grid as earlier than, however this time we will use grid-template (or the longhand grid-template-rows/grid-template-columns) to instruct it to make use of a subgrid.

.hyperlink {
  grid-template: subgrid / subgrid;
}

Now, positioning the pseudo-elements on the grid as earlier than will guarantee they align accurately with the unique grid gadgets.

This assumes we’re utilizing the default align-items worth of stretch. If we use something aside from that, it’s possible we’ll nonetheless run into some alignment issues.

Browser help

Earlier than we get too excited, let’s take a look at the truth. On the time of writing, subgrid is barely supported in Firefox. That’s it. Which is a disgrace, as a result of it’s extraordinarily helpful, and would most likely enhance CSS Grid adoption. As soon as it lands in Chrome (and I consider it can, in some unspecified time in the future), then it’ll be far more worthwhile to make use of in manufacturing. I hope that writing about and sharing use instances like this may enhance the momentum to deliver subgrid help to all browsers.

If you wish to use the above approach, you possibly can at all times present a (albeit much less excellent) fallback for non-supporting browsers – which, fortunately is just one line of code:

.hyperlink {
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);

  @helps (grid-template: subgrid / subgrid) {
    grid-template: subgrid / subgrid;
  }
}

Then, when subgrid lastly hits the mainstream, your web site shall be able to go!

See the complete demo on Codepen:

See the Pen Grid hover impact with subgrid by Michelle Barker
(@michellebarker) on CodePen.

Sources

For those who’re interested by studying extra about subgrid, Rachel Andrew has bought your coated with this convenient information:

CSS Grid Degree 2: Right here Comes Subgrid