Brett Jones

Monopoly, but in CSS Grid

  • Save

In trying to come up with ideas to play around with CSS Grid, an unexpected novel idea came up—representing a boardgame.

In looking for grids everywhere, you start to see them everywhere. Looking at Monopoly, I started to discern the grid it was based on. I simplified it a little, because I was running out of ideas for spaces, and because it’s hard to display on small screens.

I cheated with the corners a little too using SVG images. Transforming and positioning text is a nightmare (thankful for the admittedly not-widely supported writing-mode property).

keyboard shortcuts: L or F like