Does CSS Grid Replace Flexbox?

.ad {
  grid-column-start: 1;
  grid-column-end: 3;
}

What we’re saying with the code above is “start this div on the first column and end on the very last column.” That should look something like this:

See the Pen Flexbox and Grid by Robin Rendle (@robinrendle) on CodePen.

Further, let’s say that we always wanted our ad block to be twice the size of our first row – we can totally do that! We just need to use the grid-template-rows property:

.grid {
  display: grid;
  max-width: 800px;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: 1fr 2fr 1fr;
}

That’s the equivalent of saying: “there are three rows in our grid. Always make sure that the second row is twice the size of the first and third.” In other words, we’re creating relationships between rows and other rows whilst also defining the number of columns in our grid!

See the Pen Flexbox and Grid by Robin Rendle (@robinrendle) on CodePen.

With CSS Grid we can set relationships horizontally (with grid-template-columns) and vertically (with grid-template-rows) but at the same time. Flexbox, on the other hand, is stuck doing either vertical or horizontal layouts (with flex-direction) – but that doesn’t mean we should ditch it.

Potentially Confusing: a “2D” Layout with Flexbox

What can get a little confusing is that it’s not impossible to make multi-dimensional layouts in just Flexbox. For example:

See the Pen A “Grid” with Flexbox by Chris Coyier (@chriscoyier) on CodePen.

There are certainly rows and columns there, even a final element that spans multiple columns. It’s easy to build and flexible. It’s done through allowing flex-wrap on the container, having the children’s flex-basis be 1/3 of the width of the container, and allowing flex-grow to stretch children if need by. (The flex property is shorthand for flex-grow, flex-shrink, and flex-basis.)

It’s not wrong, it’s just one way of doing something like this, and you could probably make an argument for it being less intuitive and adaptable.

Potentially Confusing: a “1D” Layout with Grid

Grid can do 2D layout, meaning defining both grid-template-rows and grid-template-columns, but it doesn’t have to use both. Here’s a demo of using it just to lay boxes in a horizontal row:

See the Pen Easy Columns with Grid by Chris Coyier (@chriscoyier) on CodePen.

This isn’t wrong either. In fact, you could easily make the argument that this is easier to understand and more succinctly expressed than doing it with flexbox. For example, no layout properties are needed on the child elements at all. But you could also argue that purely 1D layout like this is more powerful in Flexbox, because Flexbox allows us to move those elements around easier (e.g. move them all to one side or another, change their order, space them out evenly, etc).

About That Nesting

One more time to lock it in!

This is good to remember: grid items can be flex parents.

See the Pen Easy Columns with Grid by Chris Coyier (@chriscoyier) on CodePen.

And, flex items can be grid parents:

See the Pen Easy Columns with Grid by Chris Coyier (@chriscoyier) on CodePen.