Minding the gaps: A new way to draw separators in CSS

The gap capability in layout is — in my opinion — one of the most powerful capabilities CSS has added…ever. There’s a problem with it though: if you want separator lines, you’re stuck with hacks.

We’ve done this sort of thing before which is not ideal:

body {
  background: white;
}

.grid-layout {
  display: grid;
  /* Rest of the grid stuff */

  /* Separator lines faked with a background */
  background: black;

  /* Separator line width */
  gap: 1px;
}

.grid-layout > * {
  padding: 1rem;

  /* Same background as the body to make the gap appear like separator lines */
  background: white;
}

This is very much a hack and it’s also quite problematic because those backgrounds won’t show up in high contrast mode.

You can deploy hacks like overlapping outline to combat that, but it’s a hack. CSS is beyond that now.

Well…mostly beyond that. There’s still details to get right and the folks at Microsoft are trying to fix the separator lines with an interesting row-rule and column-rule combo. They’re asking for feedback too, so get stuck in and let’s get this working in the best possible way!

Advert