Refer to the spec: Introduction

The introduction also mentions some of the features of Grid Layout that do not exist in Flexbox. For example the ability to position items on the two axes as shown in this next example where I am using line-based positioning to position items. The example also demonstrates that Grid Layout enables the layering of items, which Flexbox does not.

The final paragraph of this part of the introduction reads as follows:

Although many layouts can be expressed with either Grid or Flexbox, they each have their specialties. Grid enforces 2-dimensional alignment, uses a top-down approach to layout, allows explicit overlapping of items, and has more powerful spanning capabilities. Flexbox focuses on space distribution within an axis, uses a simpler bottom-up approach to layout, can use a content-size–based line-wrapping system to control its secondary axis, and relies on the underlying markup hierarchy to build more complex layouts. It is expected that both will be valuable and complementary tools for CSS authors.

Grid: enforces 2-dimensional alignment

This means that once you have a grid, things have to align to the grid. By using the ability of grid to span rows and columns, then using the Box Alignment properties to cause items to align to different positions in the grid area you can certainly get the effect of “breaking the grid”. Underneath it all is a strict, two dimensional grid.

In this next example, item two has a width and is aligned inside the grid area. The area itself however remains part of the grid.

Grid: a top-down approach to layout

This enforcement of 2-dimensional alignment creates a requirement to do the layout from the top down. We need to know what our grid is in order to enforce alignment based on that grid.

With grid you define your grid and items have to fit into it. There is the ability within grid layout to allow content to define the size of tracks. However, due to the strict two-dimensional grid, that sizing is going to size the entire track as in this very simple example. Later in this series we will look at all of the ways you might size these tracks.

Flexbox: a content size-based line-wrapping system

You can make a wrapped layout with flexbox, therefore laying things out in two dimensions. However alignment happens in a single dimension, based on the content size and available space in the main axis.

If you compare the following example to the grid example above, the sizing of the individual flex item does not change the sizing of items above it. If that is the type of layout you want, then you want to use Flexbox. When you want the strict grid of rows and columns, you need grid.

Flexbox: relies on the underlying markup hierarchy

This sentence points to the fact that when using Flexbox, your layout is more tightly coupled to the document order of elements. While there are certainly attempts to make flex grid which use order to get past this issue, it generally isn’t a wholly satisfactory way to work. Grid enables the placement of items, without reference to where they appear in the document order.

That said, it is important to remember that the accessibility of your documents relies on the logical order as described in the markup. If you find yourself using grid to change the order of items visually, check whether it makes more sense to do that in the source.

And, there is more

We’re not actually all of the way through the introduction. However, I hope these examples shed some light on grid layout and the reasoning behind the development of the specification. We’ll take a look at the examples in the next part of the introduction in my next post.