Styling empty cells with Generated Content and CSS Grid Layout

January 31, 2018

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.

Previous Article
A GraphQL Primer: The Evolution Of API Design (Part 2)
A GraphQL Primer: The Evolution Of API Design (Part 2)

In Part 1 we looked at how APIs have evolved over the last few decades and how each one gave way to the nex...

Next Article
Respect Always Comes First
Respect Always Comes First

The past years have been remarkable for web technologies. Our code has become modular, clean and well-defin...