At AnnieCannons, we teach Grid as the first tool to use in layouts. It’s designed for laying out web pages. Flexbox is useful when the space between elements is the most important thing to maintain (as in a navbar). Grid is used for everything else.

Periodically, we get a student questioning our approach. I’ve also had other developers question what I teach.

The longer and bigger question is why is everyone pushing back on Grid as the appropriate method for web page layout? Flexbox must be right because that’s what I learned in bootcamp, and that’s also what every influencer is saying, so it must be right.

The answer is complex:

• Flexbox is what was taught in bootcamp 10 years ago (because Grid was not well supported).
• Those bootcamp grads have gone on to teach bootcamps now.
• Those instructors have never upgraded their CSS skills because they are too busy chasing the latest in JavaScript.
• Those instructors figure that Flexbox is fine, because they know and understand it, and it’s a supported spec, so why bother with something that may not give an obvious and immediate benefit?
• Because they haven’t learned what Flexbox or Grid are good for, they can’t articulate the difference to their students.
• Another generation of students learn nothing but Flexbox, and so we go forward.

Unfortunately, around the cycle goes again, with developers never moving on from Flexbox because their influencers haven’t told them to do so.

In order to get Flexbox to work for a grid-like layout, one must apply either a width (wrong) or flex-basis (better!) to each cell, thus killing the “flex” in Flexbox. If you have to do this, why would you use anything but Grid?

I am the first to line up behind “keeping things simple” when teaching beginners a development world which is nothing but nuance and complexity. One of the best things we can do as educators is draw a bright line between use cases. Why do Flexbox layouts persist? Beca**use our current bootcamp instructors can’t articulate why Grid is best for grid-based layouts. ** Are you kidding me?

Hopefully I’ve outlined some easy bright lines you could share with your students. Please stop telling students that “Grid is really optional, and we don’t know the difference between the two, so just learn whatever.”