CSS: Styling grid tracks with pseudo elements and display contents

Having not seen much documentation for this concept I thought I’d share a technique I came up with to add separators between CSS grid children.

Here’s a simplified example:

Here’s how it works:

1. Set display: contents; on the grid’s direct children
2. Sprinkle in pseudo elements on those direct child elements and you can now position those generated contents on the grid

A few notes:

• display: contents can have accessibility issues if used on meaningfull elements, aka an unordred list, or a div with an aria attribute, so use only on meaningless elements
• an extra wrapper element — the .grid > div > div in this example — is rather necessary anyway — to style the card itself — so you can probably add aria attributes there if required (still no luck with an unordered/ordered list however)
• this technique probably won’t be ideal if you’ve got empty cells in your grid — unless you add empty tags of course, but that’s something most developers wouldn’t be too comfortable with (and rather defeats the idea of using pseudo elements in the first place)
• it does allow however more styling than if using only the two pseudo elements available on the grid without the display contents trick (see for example this great write up by Rachel Andrew)
• and probably comes with more flexibility than the faux grid tracks documented in this 2017 ALA article from Eric Meyer
• the example in this page is deliberately simple but it might get a bit messy on larger/less structed grids

See the pen.