preface

This article originated from a question from Zhihu: “CSS Grid layout is so good, why has no one developed a front-end framework based on Grid layout?”

The article dragged on for two months because I really didn’t know where to start. Almost all of the answers to this question miss the point, and the CSS Grid is deeply misunderstood. This problem may not be well described, because CSS Grid-based frameworks already exist. Flex-layout is a command – based Layout wizard. Don’t be misled by the name of the project. Although it is called flex-layout, there are two types of instructions: Flex and Grid.

I think a better description of this question would be “Why isn’t there a pure CSS front end framework based on Grid layout?” There are a lot of CSS layout frameworks based on Float and Flex, but I haven’t seen any implementation based on CSS Grid. I also considered incorporating CSS Grid in V3 when I wrote Snack, but later found it impractical, as detailed below. Bootstrap is said to have planned to integrate CSS Grid in v5 as well, but currently uses Flex layout. I personally feel that flex-layout based on instructions is the best way to integrate CSS Grid.

This article intends to talk from the opposite Angle, if we want to implement a CSS Grid based layout framework, what are the problems we will encounter?

Browser compatibility

Let’s talk about compatibility, many people always feel CSS Grid compatibility is not good. However, the statistics below show that CSS Grid support is fairly good in most browsers, and Flex has very limited properties available on IE10. According to statistics, CSS Grid usage and Flex usage have been basically equal. So compatibility does not answer the question posed in the opening paragraph.

CSS layout framework features

There are four types of CSS layouts: Float, Flex, Grid. These three layout methods are progressive, gradually enhance the convenience of CSS layout. The best practice for CSS layouts is Bootstrap, where Float and Flex layouts are already implemented, but the Grid layout is nowhere to be seen.

The key to the CSS layout framework is how to design the grid. Let’s take a look at the layout in Bootstrap.

<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>
Copy the code

Those of you who have used Bootstrap will be familiar with these structures. In Bootstrap V4, rows can also be used with Utilities, thanks to the enhanced Flex layout capabilities.

<div class="row align-items-start">
  <div class="col">One of three columns</div>
  <div class="col">One of three columns</div>
  <div class="col">One of three columns</div>
</div>
<div class="row align-items-center">
  <div class="col">One of three columns</div>
  <div class="col">One of three columns</div>
  <div class="col">One of three columns</div>
</div>
<div class="row align-items-end">
  <div class="col">One of three columns</div>
  <div class="col">One of three columns</div>
  <div class="col">One of three columns</div>
</div>
Copy the code

The combination of row and COL has almost become the consensus and standard for grid layouts. Next, let’s use this design method to tear a Grid by hand to see the effect.

Tear CSS layout grids by hand

In fact, it is not difficult to tear a CSS layout grid, the key is to be familiar with the preprocessor loop function. Let’s implement a simplified Grid layout using Float, Flex, and Grid and compare the differences.

Float

Float was the only way to implement fluid layout in the past. The difficulty was dealing with the collapse of the parent element, which is a well-trod problem and won’t be covered in this article. Here is a simplified version of the Float grid:

See the Pen float-columns by Zongbin (@nzbin) on CodePen.

This grid is a classic for its simplicity and utility. But Float layouts are very limited, and if the height of the grid is not the same (for example, if the height of the first grid is increased), the layout will be misplaced.

Flex

The birth of Flex solves almost all of the pain points of Float grids, such as the dislocation problem mentioned above. Here is a simplified version of the Flex grid:

See the Pen flex-columns by Zongbin (@nzbin) on CodePen.

Flex works well enough for one-dimensional layouts, at least for fluid layouts, so is it necessary to introduce two-dimensional layouts?

Grid

Here we go! Here we go! Here we go!

Grid is a more advanced layout technology than Flex, so there is no problem simply replacing Flex with a Grid layout system. Here is an extremely simple Grid Grid, almost indistinguishable from a Flex Grid.

See the Pen grid-columns by Zongbin (@nzbin) on CodePen.

In addition to implementing Flex layouts, the Grid can also adjust each row vertically (such as grid-template-rows: 1FR 2FR). Grid-template-columns: repeat(10, 1fr); grid-template: repeat(10, 1fr); In Flex, you need to recalculate the width of the grid.

The CSS Grid capabilities shown in the example above are just the tip of the iceberg. As a two-dimensional layout technology, it has a cumbersome property notation, such as the Grid-Template-Areas MDN Demos, another powerful feature. This method of attribute definition is difficult to achieve the corresponding function using the superposition combination of class names.

I personally don’t think it makes much sense to simply replace a Flex Grid with a Grid Grid, and a new Grid system based on CSS Grid should take full advantage of it. This is probably why CSS Grid systems haven’t been around for so long. I do not know whether this article has clearly expressed my views, or whether it can answer your doubts about the question at the beginning. Now look at the Grid in Flex-Layout.

The Flex – the Grid Layout

Because flex-Layout is an instruction-based implementation, it doesn’t have the same limitations as the class name overlay approach and can take advantage of almost all the advantages of a CSS Grid. Here’s how grid-template-areas are defined.

<div gdAreas.xs="header | sidebar | content | sidebar2 | footer" gdGap="1em"
     gdColumns.xs="none"
     gdAreas.sm="header header | sidebar content | sidebar2 sidebar2 | footer footer"
     gdColumns.sm="20%!"
     gdAreas.gt-sm="header header header | sidebar content sidebar2 | footer footer footer"
     gdColumns.gt-sm="120px auto 120px" gdGap.gt-sm="20px" [ngStyle] ="{'max-width': 'auto'}"
     [ngStyle.gt-sm] ="{'max-width': '600px'}">
  <div class="blocks one" gdArea="header">Header</div>
  <div class="blocks two" gdArea="sidebar">Sidebar</div>
  <div class="blocks three" gdArea="sidebar2">Sidebar 2</div>
  <div class="blocks four" gdArea="content">Content
    <br /> More content than we had before so this column is now quite tall.</div>
  <div class="blocks five" gdArea="footer">Footer</div>
</div>
Copy the code

I admire flex-Layout both in terms of design and implementation. It is fundamentally different from the traditional Bootstrap grid. This article is not about flex-Layout. If you are interested in flex-Layout, check out the website for more information.

conclusion

After brewing for two months, I still feel that I have not expressed my views clearly. Back to the question itself, [why is there no pure CSS front-end framework based on Grid layout?], I think the most important thing is that the traditional writing method can not give full play to the advantages of CSS Grid, at least with the previous combination of classes is not able to do. The nature of the CSS Grid property also means that it cannot and should not be simply a stack of composite class names.