Which tool to use? Flexbox or Grid?

March 17, 2017

A common question I have seen people ask is which of the new CSS layout tools (Flexbox or CSS Grid) to use to solve a problem. Because Flexbox has been implemented in the browsers for some time, many have used Flexbox to create a grid layout.

I even used it for a solution recently because CSS Grid had yet to be implemented in the browsers. But I also recognized that Grid would have been a better solution (and went back and added support for Grid using a feature query.)

Rachel Andrew has a simple explanation that I have found helpful.

As she explains it:

Flexbox is essentially for laying out items in a single dimension – in a row OR a column. Grid is for layout of items in two dimensions – rows AND columns. ¹

Last week, I came across an example that where both of these tools could be used to solve different problems in a site.

Both the primary navigation and the menu navigation could use Flexbox as a solution since they are both one dimensional layouts.

(Though on closer inspection, it might not work as well for the primary navigation on the mobile view because the current site has the 4 menu items hidden in a toggle menu and the My Sonic link is visible on the right side of the mobile view.)

And then the listing of different hamburger options would use grid layout for rows and columns. And then within the grid items, you can use Flexbox for the layout with the menu item name and image.

I coded out an example on CodePen. The pen is responsive but I was mainly focused on the desktop view as an example of using Flexbox or CSS Grid to solve the layout problems.

You will need to use an up-to-date version of Firefox or Chrome to see the CSS Grid layout in action.

See full page example on CodePen