Anyone who has even dabbled a little in creating websites knows that <div>s are an essential building block for controlling our layouts.

HTML5 introduced new semantic elements to help, and while they are a fantastic addition to the language, they’re a little bit like the garnish on our <div> soup.

With grid, we no longer have to rely on <div>s to create the structure of our page, or even a more complex component. The structure is literally defined by the parent and not how the content is organized within in.

This means we can have nice, simple markup that sticks to the content itself without a reliance on organizing it through the use of <div>s.

Grid might be complicated, but so is flexbox

I’ve heard a lot of people complain that grid is too complicated and that flexbox gets the job done. I’d argue that they are comfortable with flexbox and don’t want to bother learning grid because of that.

At the end of the day, Grid does introduce a boatload of new properties and values, so yes, there is a learning curve. But flexbox is plenty complicated as well.

Can you tell me the benefits of flex-basis over setting a width? Or really, how flexbox calculates the widths of flex items if we haven’t explicitly set them?

For example, if you showed the below example to someone who had never used flexbox, how do you explain the fact that it’s the same markup and the same CSS for both sets of columns? To make it even worse the second column in both has a width: 50%. Clearly that width of 50% isn’t really setting it to 50%.

“Well, it starts off with flex items shrinking if there isn’t enough room, so even though we set the width to 50%, it doesn’t have the space, so it shrinks down to squeeze in because the other div requires more space. The 50% is more of its ideal size than what it will actually be.

“So in the top example, the first div’s content being so long is causing a problem because, as a flex item, by default, it wants to shrink to fit its content. In this case that item has a lot of content so…”

So yes, flexbox is awesome and does a great job at creating layouts, but please don’t tell me that it’s simple. As soon as you get out of perfect examples, it’s often far from intuitive and sometimes it can be downright strange.

Grid is complicated in that there are a lot of new properties and values, but they gives us a lot more control than flexbox does.

In this article I’d like to look at how that extra layer of control helps simplify our markup and let us write less code, and that’s without even learning how to use a bunch of its fancy features.

The limitations of flexbox

Even if we take a simple component and build it with flexbox, because it only acts in 1-dimension at a time (the flex items are either rows or columns, they cannot be both), we’re left with a lot of divs to break things up into rows, which can then be split into columns.

For example, if we’re working on a card that looks like this:

It’s not a complicated layout but we still need to organize our content in a pretty specific way to get it to work.