CSS Grid in the real world...

Over the past couple of weeks I've taken a little time to get to know the CSS Grid spec. It's super cool and allows front end developers to build stuff we've always told designers weren't possible.

Sites like Grid by Example illustrate the endless possibilities, but for those of us involved in client work, CSS Grid is a bit more tricky. Lots of my clients are in finance, or some other environment where IE11 is prominant, so poor support for such browsers isn't an option. That is a bit restrictive (in particular the auto layout functionality of the specification can't be used), but with a bit of work, some things can be done as the old spec (originally proposed by Microsoft) is supported all the way back to IE10.

As a little example, here's a little grid of different shaped squares that alters at different screen sizes and remarkably works all the way back to IE10.

Show Comments