CSS3 added Grid Layout for three musketeers

One, foreword

Compared with multi-columns Layout and Flexible Box Layout, Grid Layuot is more like the combination of the two. Of course, it is not to say that Grid Layout can replace the two.

In addition, Grid Layout is essentially different from Flexible Box Layout, which is very popular at present, in dimension. With Flexible Box layouts, you can only define the main axis in one direction with flex-direction, whereas with Grid Layouts, it’s completely different.

Core usage

Here’s a step-by-step guide to the core usage of Grid Layout:

1. Macro perspective

At a macro level, you can think of a Grid Layout as consisting of rows and columns, which is analogous to the TABLE tag in HTML. Next, use Grid syntax to declare a structure with three rows and three columns.

  .grid {
    display: grid;
    width: 300px;
    height: 300px;
    margin: 0 auto;
    grid: repeat(3, 1fr) / repeat(3, 1fr);
  }
  .grid > div:nth-child(odd) {
    background-color: #f5f5f5;
  }
  .grid > div:nth-child(even) {
    background-color: #eee;
  }
Copy the code

You can make the element a grid layout container by setting the display property to grid or inline-grid, which is basically a common practice for new layout declarations.

The above grid property is a compound property, equivalent to the following code.

  .grid {
    /* grid: grid-template-rows / grid-template-columns */
    grid-template-rows: repeat(3, 1fr);
    grid-template-columns: repeat(3, 1fr);
  }
Copy the code

Fr is a new unit in Grid Layout and is analogous to the Flexible Box Layout flex-grow property.

Each of these nine cells has a special term in the Grid — Grid Cell.

2. Microscopic perspective

To look at Grid Layout from a micro perspective, you first need to understand another term — Grid Line.

I don’t know if you’ve seen tofu, but one of the steps is to cut an entire block of tofu with a Line that looks exactly like the Grid Line above.

Rows and columns need to be described by a more technical term — Grid Track.

Grid Track is actually a region formed by two adjacent Grid lines.

Grid Lines are invisible in Grid Layout, but you can use them. They are numbered by default. Remember the Grid Layout above? By setting the display and grid properties, you divide the container into structures, but you don’t set the placement of the child elements. Fortunately, Grid Layout sets a default location for each child element, such as the first row and column.

  /* grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end */
  grid-area: 1 / 1 / 2 / 2;
Copy the code

The number above is the Grid Line number, and it also supports custom naming.

  .grid {
    position: relative;
    margin: 100px auto;
    width: 500px;
    height: 500px;
    display: grid;
    grid: [line-row-1]1fr[line-row-2]1fr[line-row-3]1fr[line-row-4] / [line-col-1]1fr[line-col-2]1fr[line-col-3]1fr[line-col-4];
  }
  .grid > div:nth-child(1) {
    grid-area: line-row-1 / line-col-1 / line-row-4 / line-col-3;
  }
Copy the code

3, the Grid Area

Grid Area is also an important term. It consists of one or more Grid cells. In the previous example, we saw that a Grid Line can be used to allocate space for a Grid Area, and that it can be used in another way.

  .grid {
    position: relative;
    margin: 100px auto;
    width: 500px;
    height: 500px;
    display: grid;
    grid: "first first second" "first first fouth" "first first third";
  }

  .grid > div:nth-child(1) {
    grid-area: first;
  }
  .grid > div:nth-child(2) {
    grid-area: second;
  }
  .grid > div:nth-child(3) {
    grid-area: third;
  }
  .grid > div:nth-child(4) {
    grid-area: fouth;
  }
Copy the code

In the same example above, we can place the child elements like this, which is not particularly friendly.

4, absolute positioning in Grid Layout performance

The absolute position of a Grid Layout is determined by the position property of the parent element, but grid-area property can be used to achieve the same effect.

  .grid {
    position: relative;
    width: 400px;
    height: 400px;
    margin: 100px auto;
    display: grid;
    grid: repeat(2, 1fr) / repeat(2, 1fr);
    border: 1px dashed red;
    padding: 10px;
  }

  .demo1 {
    grid-area: 2 / 1 / 3 / 2;
    position: absolute;
    top: 30px;
    left: 30px;
    width: 100px;
    height: 100px;
    background: red;
  }
Copy the code

5, other

After understanding the terms and usages above, Grid Layout is basically no mystery anymore. In addition, for example, the gaps between Grid items and their arrangement are basically the same as Flexible Box Layout.

There are a lot of interesting things about Grid Layout, such as margin dents, which do not happen in Grid Layout. I leave that to the reader to explore.

Three, the last

Why the title? This is mainly because most UI component libraries now basically provide grid components. Take the popular Bootstrap component library for example, the implementation of grid components is as follows:

  • .row sets the row,.col-* sets a column with a percentage width;
  • Row offsets the padding of the container with a negative margin;
  • Col creates gaps between elements through left and right interior margins;
  • Set breakpoints through media query to achieve responsive layout;

CSS3 added this Grid Layout compared to these implementations, can be said to be very good. Soon we’ll be able to say goodbye to grid-Framework and have only one Grid Layout for CSS3.

The resources

  • W3C Grid Layout
  • Da Mo teacher “using CSS Grid nine mistakes” sorted out a lot of reference materials
  • Code for all of the above use cases