Checkerboard Grid Styling

Checkerboard styling can add a nice looking effect to a CSS grid.

But how do you maintain that styling responsively as the number of grid columns changes? How do you ensure that the solution works with CSS grids, where you cannot individually style your alternating cells?

Here's a solution using CSS nth-child pseudoselector.

‍

Inspired by Daniel Nicholls' post;
https://www.facebook.com/groups/webflowdesigners/posts/1918186122027385/

Demonstration;
https://codepen.io/memetican/live/vYMzgwW/32a76a82dc6d8ff69b2089a487fac625

Codepen;
https://codepen.io/memetican/pen/vYMzgwW/32a76a82dc6d8ff69b2089a487fac625

‍

‍