Flexi-time – using a flexbox grid to solve common website layout problems

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.

by Lee Jordan

Find us on GitHub or follow us on Twitter.

Here at graze, we're always looking to hire smart people to join our tech team. If you love solving the types of technical challenges we face, send your CV to jobs@graze.com.

comments powered by Disqus