Over the past few years, Flexbox has become the most popular layout framework for the front end, which is not surprising because it’s so easy to use to align elements.

However, there is a kid named Grid in the front End village, who has a lot in common with Flexbox, some of which are better than Flexbox, but some of which are not.

This can also become a source of tension for developers, which one to use? This paper will compare the two modules at macro and micro level.

One-dimensional vs two-dimensional

Flexbox for one-dimensional layout, Grid for two-dimensional layout

This means that if you only layout in one direction (like putting three buttons inside the header), you need to use Flexbox

It will be more flexible than the Grid, less code to implement and easier to maintain.

However, if you are going to create a complete layout on two dimensions, using both rows and columns, you should use Grid

A two-dimensional

In this case, the Grid will be more flexible and will make your tags simpler and your code easier to maintain.

You can use both together, and the perfect way to do this in the example above is to use Grid to lay out the page and Flexbox to align the contents of the headers.

Content first vs. layout first

Another core difference between the two is that Flexbox is based on content and Grid is based on layout, which may sound abstract, but let’s use a practical example to illustrate.

We’ll use the header mentioned in the previous paragraph, whose HTML looks like this:

<header>
  <div>Home</div>
  <div>Search</div>
  <div>Logout</div>
</header>Copy the code

Before using Flexbox, divs inside are stacked on top of each other:

Flexbox header

When we add display: Flex, they will look nice in one line.

header {
  display:flex;
}Copy the code

To make the logout button to the far right, we simply specify a margin for it:

header > div:nth-child(3) {
  margin-left: auto;
}Copy the code

The effect is as follows:

Note that we don’t add anything other than display: flex to let the element decide where to put it.

This is the core difference between Flexbox and Grid, and will become even more apparent when we create the header with Grid.

Although creating a one-dimensional header with a Grid is not a good idea, implementing it in this article is a good exercise because it teaches us the core difference between Flexbox and the Grid

Grid header

There are several ways to do this if you use Grid. I’m going to do it in a very simple way, where our Grid has ten columns, each one one unit wide.

header {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
}Copy the code

He looks the same as Flexbox’s solution

However, to see the difference from God’s perspective, let’s use Chrome’s censorship element to see:

The key difference is that the layout columns must be defined first. Start by defining the width of the column before we can place the elements in the available cells.

This way it forces us to split up how many columns our header has

Unless we changed the Grid, we would be stuck in 10 columns, but in Flexbox we wouldn’t be bothered by that.

To place logout on the far right, we’ll put it in column 10:

header > div:nth-child(3) {
  grid-column: 10;
}Copy the code

When reviewing an element, it looks like this:

We can’t simply add a margin-left: auto; Because it’s already in the third cell, to move it, we have to find another cell to put it in.

Combination of both

Now let’s see how we can use both Grid and Flexbox to incorporate headers into our layout. Let’s create the layout first.

The labels are as follows:

<div class="container">
  <header>HEADER</header>
  <aside>MENU</aside>
  <main>CONTENT</main>
  <footer>FOOTER</footer>
</div>Copy the code

Then CSS:

.container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 50px 350px 50px;
}Copy the code

Put elements into the Grid:

header {
  grid-column: span 12;
}
aside {
  grid-column: span 2;
}
main {
  grid-column: span 10;
}
footer {
  grid-column: span 12;
}Copy the code

Now we just need to lay out the header: we convert it from an element in the Grid to a Flexbox container.

header {
  display: flex;
}Copy the code

Now we place logout to the right:

header > div:nth-child(3) {
  margin-left: auto;
}Copy the code

Now we have the perfect layout for both Grid and Flexbox. Here are the two containers:

So now you understand the difference between Flexbox and Grid, and how to use them together.

Browser support

At the time of this article, 77% of the world’s web traffic supports Grid, and that number is growing.

I believe 2018 will be Grid’s year to break through and become a must-have skill set for front-end developers, just like Flexbox has been for years.