graze logo

snack overflow

by the graze technology teams

It’s a common problem in responsive web development that making elements the same height at all viewport sizes is quite fiddly to do, especially when your elements are dynamically generated. As you clever people know, flexbox solves this problem perfectly by introducing the property of align-items: stretch. Flexbox also solves a whole host of other layout problems such as vertical centering.

I decided to make use of my hacker time at graze to learn more about flexbox and what I discovered was very encouraging. At the time of writing, full global flexbox support is at 81.74% (excluding browsers with outdated or partial support) so if we begin using flexbox it will solve a lot of these layout problems for the vast majority of our users

What I learnt during my hacker time caught my interest and I spent a few more hours in my spare time building a lightweight responsive flexbox grid with cross browser support, an inline-block fallback and no polyfills.

The cross browser support is good, giving us a reliable grid that performs well across all of our supported browsers and I will be rolling it out on the graze website shortly.

graze flex grid

If you have any feedback on my solution then feel free to file a github issue, or reply to this blog post.