Monopoly on Grid

This morning on Twitter, Shane Hudson asked if it were possible to do a kind of Monopoly board layout using CSS Grid. He’d tried in the past, but had gotten stuck.

I love questions like these, because they get to the heart of what I think really matters as we learn CSS Grid — understanding what brand new things are possible, and what’s still actually not. A year ago I wouldn’t have known the answer to this question — how can we make a Monopoly board layout? Can we? Would it be responsive? Do I need to write out all the code to tell each item to be in each particular place? Or can I rely on the autoplacement algorithm to place items? How flexible would it be if the content changes (to say, use this kind of layout for a list of articles (and not for Monopoly). I didn’t answer all of those questions for Shane, but I did quickly put together a demo.

It’s here: http://codepen.io/jensimmons/pen/qRGRjO?editors=1100#0 And the result looks like this:

Add new comment

By submitting this form, you accept the Mollom privacy policy.