Weng Binbin, the front-end engineer of Micro Medical cloud, will never stop on the road of programmer training.

CSS Grid layout is a powerful and creative layout solution. This article is for web developers who don’t know Grid. I will introduce it from the following aspects

  1. Why Grid is needed. How to use Grid Line safely in production environment
  2. This section describes basic concepts of Gird.
  3. Start learning to use Gird.
  4. How to use Grid safely in a production environment.

Why Grid is needed

We have a lot of different layout schemes. For example, we used float, position and inline-block for table layout. Since these methods were not designed for layout, but for graphic display, CSS design was not perfect. And missing a lot of features, such as not very convenient implementation of vertical center; There is no way to explicitly create a BFC, only hacks such as Overflow: Hidden, or clear:both to remove floating side effects.

In 2009, W3C proposed a new solution —-Flexbox layout, Flex layout is an axis layout, can only specify the “project” against the axis position, can be regarded as a one-dimensional layout, but not for complex two-dimensional layout.

The Grid layout is the first solution to the layout problem since the creation of CSS. It divides the container into “rows” and “columns”, generates cells, and then specifies the cells “where the project resides”, which can be regarded as a two-dimensional layout. A Grid layout is similar to a Flex layout in that it can specify the location of multiple items within a container. However, there are important differences. Grid is primarily for layout, while Flex is primarily for content, and the two approaches are not mutually exclusive but mutually reinforcing.

It’s also worth noting that many CSS frameworks, such as Bootstrap and Foundation, provide excellent grid layout templates, but they are not grid in nature, they are implemented by float. CSS Grid is completely different.

The foundation of the layout of web pages was originally based on float, which resulted in a one-dimensional model of layout, so when designing layouts we thought in terms of rows. Here is an example of a simple two-column layout. Although it looks like there is a column below picture B, there isn’t one.


In contrast to the CSS Gird layout, we will think about it in the following image.


In the figure, we have a two-dimensional system, not only rows, but also columns. This is a brand new way of thinking, similar to the way of thinking that needs to be adjusted when React/Vue Hook appears. Next, I will show you how to understand it.

This section describes basic concepts of Gird.

Before diving into the concepts of Grid, it’s important to understand the terminology, and since the terms covered here are conceptually similar, it’s easy to confuse them if you don’t understand what they stand for.

Grid Container

Setting display: grid on an element makes it a Grid Container, and its direct children become Grid Items

<style>
.container {
  display: grid;
}
</style>
<div class="container">  <div class="item"></div>  <div class="item"></div>  <div class="item"></div> </div> Copy the code

Grid Item

A direct descendant of a Grid Container, such as the item element in the following code, is a Grid item, but the sub-item is not a Grid item

<style>
.container {
  display: grid;
}
</style>
<div class="container">  <div class="item"></div>  <div class="item">  <p class="sub-item"></p>  </div>  <div class="item"></div> </div> Copy the code

Grid Line

The boundaries of a grid structure, which can be horizontal or vertical, lie on either side of a row or column. In the figure below, the yellow line is a column grid line.


Grid Cell

The space between two adjacent row and two adjacent column grid lines. It is a single “unit” of the grid. For example, the yellow cells in the figure below


Grid Area

A grid region can contain multiple cells, such as the yellow region in the figure below.


Start learning to use Gird

grid-template-columns / grid-template-rows

Let’s start with the basics. Here is a grid with 3 rows and 6 columns


There are four grid lines and seven grid lines. The area before the other two grid lines is called grid Area, which is in the orange area in the figure below. There are also grid cells for each grid, which are called grid cells, which are in the green area in the figure below.


If it’s easy to generate this layout, let’s just focus on CSS. Here’s the code

.grid {
  display: grid;
  grid-template-columns: 100px 100px 100px 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
}
Copy the code

First we need to change the container from a normal container to a grid container. Next we define three rows to be 100px high and six columns to be 100px wide.

You can use this to look at the relevant code, there are many repetitions of 100px in the above example, we can also rewrite as follows

.grid {
  display: grid;
  grid-template-columns: repeat(6, 100px);
  grid-template-rows: repeat(3, 100px);
}
Copy the code

Now let’s add margins to it, using grid-Gap.

.grid {
  display: grid;
  grid-template-columns: repeat(6, 100px);
  grid-template-rows: repeat(3, 100px);
  gap: 30px;
} Copy the code

So now it looks like this

You can also set different margins for rows and columns using grid-gap: 30px 10px; Make the row margins 30px and the column margins 10px to complete a simple grid layout.

grid-row / grid-column

Next we’ll look at the second set of grid-row and grid-column attributes

In the preview image below you will see various auxiliary dotted lines, which do not exist in the actual rendering and will only be visible if you use Firebox Debug mode. I recommend that you use Firefox to Debug the Gird layout. Chrome is nowhere near as good as Firefox in this regard, and hopefully Chrome will soon follow up on layout debugging

<style>
.container {
  display: grid;
  grid-template-columns: repeat(3, 100px);
 grid-template-rows: repeat(3, 100px); } .grid-item {  background: red;  grid-row: 2 / 3;  grid-column: 2 / 3; } </style>  <div class="container">  <p class="grid-item">Registered network</p> </div> Copy the code

Grid-row means set the grid-item to start at the second line and end at the third line, grid-column means set the grid-item to start at the second line and end at the third line, sample code

Here you might think it’s amazing, but grid is easy to do what used to be a troublesome layout. The grid layout, with its system of separate rows and columns, makes it easy to locate/relocate content.

Let’s move on to the span keyword. If we want the layout above to fill all three of the middle rows, one way to do this is to set grid-column: Grid-column: 1 / span 3 grid-column: 1 / span 3 grid-column: 1 / span 3 grid-column: 1 / span 3 (1 / span 3)


The sample code

grid-template-areas

Then we introduce the Grid-template-Areas attribute, which I think is a revolutionary attribute for positioning your layout as a two-dimensional array.

The grid-template-Areas attribute accepts one or more strings as values. Each string (enclosed in quotes) represents a row in the grid. You can use this property on a grid defined with grid-template-Rows and grid-template-columns, or you can create a layout, in which case all rows will be automatically resized

.container {
  grid-template-areas: "one one two two"
                       "one one two two"
                       "three three four four"
                       "three three four four";
} .one {  grid-area: one; } .two {  grid-area: two; } .three {  grid-area: three; } .four {  grid-area: four; } Copy the code


It is important to note that our grid area must form a regular rectangular area, any L shape, concave or convex shape is not supported, will be considered invalid attribute values, of course, if you do not need to fill the entire grid that is also ok, use. Number to hold the space

.container {
  grid-template-areas: "one . two two"
                       "one . two two"
                       ". three four four"
                       ". three four four";
} .one {  grid-area: one; } .two {  grid-area: two; } .three {  grid-area: three; } .four {  grid-area: four; } Copy the code

So far we have simple introduced the ins and outs of the grid layout appears and its core attributes of a few basic grammar, which in addition to this article introduces several kinds of grammar, and syntax can be used, but due to the theme of this article is to introduce the use of CSS grid method, rather than the details of each API, I won’t repeat it here.

In actual combat

After the above learning, let’s carry out a practical example, taking the first screen of the official website of www.guahao.com as an example, we can divide the layout into 4 rows and 3 columns.


The HTML structure is defined as follows

<main>
  <img src="https://static.guahao.cn/front/portal-pc-static/img/new-wy-logo.png" alt="logo" class="logo" />
  <div class="search">
    <section class="searchBox">
      <input />
 <button >search</button>  </section>  <ul>  <li >* * * * * * * * * *</li>  <li >* * * * * * * * * *</li>  <li >* * * * * * * * * *</li>  <li >* * * * * * * * * *</li>  <li >* * * * * * * * * *</li>  <li >* * * * * * * * * *</li>  </ul>  </div>  <img src="https://static.guahao.cn/front/portal-pc-static/img/2015/platform-logo-new.png" alt="guide" class="guide" />  <div class="slider"></div>  <div class="sub-project"></div>  <img src="https://kano.guahao.cn/5gu296857515" alt="swiper" class="swiper">  <div class="help"></div>  <div class="news"></div> </main> Copy the code

You can see that, unlike previous layouts, each block can be used as a direct child of the main tag, rather than using nested tags for layout. Next comes the CSS code for the container.

main {
  display: grid;
  grid-template-areas:
                    'logo search guide'
                    'slider sub-project sub-project'
 'slider swiper help'  'slider news news';  grid-template-columns: 240px 800px 240px;  grid-template-rows: auto auto auto auto; } Copy the code

The grid-template-areas attribute alone easily defines the layout structure of the entire page, and then specifies the placement by defining grid-Area attributes for each child element.

.logo {
  grid-area: logo;
  width: 190px;
  align-self: center;
  justify-self: center;
} .search {  grid-area: search;  align-self: center;  justify-self: center; } /* more code */ Copy the code

The sample code

Safe use of Grid


Up to now, a large number of modern browsers have Grid support, as of May 2020, most advanced browsers have Grid support, and for those that don’t we can use Polyfill to make compatibility. You can also decide whether to use the Grid by checking with @supports to see if your browser supports girD layout

@supports (display: grid) {
  .container {
    /* some css code */
  }
}
Copy the code

conclusion

Although the use of Grid is very simple, but in which scenarios can bring better benefits Grid needs to be further thought, and it is not to use RID to abandon other layout methods, this requires users to adapt to local conditions according to the actual situation, flexible use.