Styling empty cells with Generated Content and CSS Grid Layout

A common Grid Layout gotcha, is when a newcomer to the layout method wonders how to style a grid cell which doesn’t contain any content. In the current Level 1 specification this isn’t possible, there is no way to target an empty Grid Cell or Grid Area and apply styling. This means that to apply styling you need to insert an element. In this article I am going to take a look at how to use CSS Generated Content to achieve styling of empty cells without adding redundant empty elements, and show some use cases where this technique makes sense.
Articles on Smashing Magazine — For Web Designers And Developers