First, you need to know something about Flexbox and Grid layouts before reading this article. If you don’t already know, you can search MDN for related knowledge (Flexbox layout, Grid layout).

In general, the traditional solution for layouts is based on the box model and relies on display + Position + float, but it is very inconvenient for more specialized layouts, such as vertical centering, which is cumbersome to implement.

Flexbox solves this problem well. It uses the properties of elastic boxes to make simple layouts faster, but this is limited to one-dimensional layouts. The Grid, on the other hand, is based on a two-dimensional layout and is designed to be a solution that changes the layout to allow for more complex layouts. It has many similar features to Flexbox, but each has its pros and cons, and you need to choose the right solution for your situation.

Let’s take a look at how these two layouts compare and how to choose the right one.

The basic concept

flexbox

Flexbox is a common name for the CSS Flexible Box Layout Module, which is a Layout model for displaying items in a single dimension (row or column).

In the specification, Flexbox is described as a layout model for user interface design. The key feature of Flexbox is that items in the Flex layout can be enlarged and shrunk. Spaces can be allocated within, between, or around projects.

Flexbox can also align items on the spindle or cross axes, providing advanced control over the size and alignment of a set of items.

grid

CSS grid layout introduces a two-dimensional grid layout system that can be used to lay out major area layouts or small components of a page.

define

Both layout schemes are defined by the display property

flexbox

display: flex | inline-flex;
Copy the code

grid

display: grid | inline-grid | subgrid;
Copy the code

One-dimensional layout versus two-dimensional layout

A one-dimensional layout is either landscape or vertical, and flexbox is a good fit.

The two-dimensional layout is the overall layout of the column and column, using the grid implementation is more appropriate.

See the chestnuts below:

Codepen. IO/w6a/pen/YzQ…

Do you start with content or layout?

In addition to the difference between 1-d and 2-D layouts, there is a way to decide whether to use Flexbox or Grid for layout. When we don’t know which way to implement it, we need to consider whether the current scene is content first or layout first.

The core difference between the two layouts is that Flexbox is content based and Grid is layout based.

In the following example, we can see a top header implemented with Flexbox and grid, respectively. You can see that while it looks pretty much the same, when you review the element you’ll see that the grid implementation is split into 12 columns, because we need to place the LOGOUT element to the far right. Instead of simply using margin-left: Auto implementation like flexbox layout.

Codepen. IO/w6a/pen/vYZ…

So when deciding whether to use Flexbox or Grid, think about whether your current scene is content-based or layout-based, and not just use one or the other, but use both organically.

Codepen. IO/w6a/pen/bGR…

Browser compatibility

flexbox

grid

conclusion

On the whole, both Flexbox and Grid are fairly compatible. Grid is a little less compatible than Flexbox. However, if possible, I recommend using grid as much as possible for layout. You can use both layouts at the same time according to different scenarios.

thinking

The following layout is implemented by Grid. Imagine how it would be implemented using Flexbox. How does grid layout compare?

Codepen. IO/w6a/pen/eYR…

The attached

Learn CSS grid games