preface

Now we all in the actual development, may use the most flex layout, of course, and floating and positioning, in addition, the past two years have been heard that grid layout is the trend, that is, grid layout, but there are not too many applications in the project, so I hereby summarize, I hope to help you and myself.

To give you a direct effect experience:

The container
project

directory

Container attribute

  1. grid | inline-grid
  2. grid-template-rows | grid-template-columns
  3. grid-template-areas
  4. grid-row-gap | grid-column-gap | grid-gap
  5. justify-items | align-items | place-items
  6. grid-auto-rows | grid-auto-columns | grid-auto-flow

The project properties

  1. grid-row-start | grid-row-end | grid-column-start | grid-column-end
  2. grid-row | grid-column
  3. justify-self | align-self | place-self

Container-specific properties

grid | inline-grid

  1. display: grid;
  2. display: inline-grid; Note: The difference between grid and inline-grid is similar to the difference between block and inline-block. The latter can be displayed on the same line as other inline elements.

grid-template-rows | grid-template-columns

  1. Grid-template-rows: sets the row height
  2. Grid-template-columns: sets the column width

These three attribute values can be used in a number of ways:

  1. Fixed value: 50px etc
  2. Repeat, and auto-fill
  3. Fr keyword
  4. The auto keyword
  5. Minmax () function

Let’s try 5 of the above:

First, the HTML content is as follows:

//html
<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item"</div> </div> // public css. container{display: grid; grid-gap: 10px 10px; } .container .item{ background: dodgerblue; }Copy the code

1. A fixed value

//css
.container{
    grid-template-rows: 50px 50px 50px;
    grid-template-columns: 50px 50px 50px;
}
Copy the code

The effect is as follows:

2. Repeat () function

From the above example, we can see that if there are repeated fixed values, we can use the repeat function instead

//css
.container{
    grid-template-rows: repeat(3, 50px);
    grid-template-columns: repeat(3, 50px);
}
Copy the code

Sometimes the cell size is fixed, but the container size is uncertain. If you want each row (or column) to contain as many cells as possible, you can use the auto-fill keyword to indicate auto-fill.

.container{
    grid-template-rows: repeat(3, 50px);
    grid-template-columns: repeat(auto-fill, 50px);
}
Copy the code

The effect is as follows:

3. Fr keyword

Fraction stands for “fragment” and is used to show the proportion between cells,

The following effects:

The code is as follows:

.container{
    width: 200px;
    grid-template-rows: repeat(3, 50px);
    grid-template-columns: 1fr 2fr 1fr;
}
Copy the code

At this point, we set the total width of the container to 200px, and then divide it in a 1:2:1 ratio, with 100px in the middle and 50px on both sides

4. Keyword auto

Let’s implement a common three-column layout of 200px left and right, with the remaining width in the middle.

The code is as follows:

 .container{
    grid-template-rows: repeat(3, 50px);
    grid-template-columns: 200px auto 200px;
}
Copy the code

That is, the cell corresponding to auto will automatically fill the remaining width

5. Minmax () function

As the name implies, set a range, maximum and minimum

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

Let’s take a look at the effect:

.container{
    grid-template-rows: repeat(3, 50px);
    grid-template-columns: 50px 50px minmax(50px, 100px);
    width: 140px;
}
Copy the code

The effect is as follows:

Grid-template-rows and grid-template-columns are common attributes that can be used together.

grid-template-areas

This property is used to set the area, we through the above we know that a container consists of one cell (or project), we want to differentiate these cells are then do further, different composition of one or more cell area, thus formed: container > area > the basic form of the cell.

The code is as follows:

//html
<div class="container">
    <div class="item item-a">a</div>
    <div class="item item-b">b</div>
    <div class="item item-c">c</div>
    <div class="item item-d">d</div>
</div>

//css
.container{
        display: grid;
        width: 150px;
        height: 150px;
        grid-template-rows: repeat(3, 1fr);
        grid-template-columns: repeat(3, 1fr);
        grid-template-areas:
                "a a a"
                "b c c"
                "b d d"
    }
    .container .item-a {
        grid-area: a;
        background: dodgerblue;
    }
    .container .item-b {
        grid-area: b;
        background: green;
    }
    .container .item-c {
        grid-area: c;
        background: yellow;
    }
    .container .item-d {
        grid-area: d;
        background: red;
    }
Copy the code

The results are as follows:

What do grid-template-areas do? The grid uses grid-area to set the name of each area, where each area will be located, and how each area will be laid out. Are generated through grid-tempate-areas.

How do you layout and display areas via grid-area for the specified label and grid-template-areas

Note: we must set the grid area to form a regular rectangular area, any L shape, concave or convex shape is not supported, will be considered invalid attribute values.

Through the described above, we respectively studied: the grid – the template – rows grid – the template – the columns grid – the template – areas, of course the three can synthesize a attribute, namely the grid – the template

grid-row-gap | grid-column-gap | grid-gap

  1. Grid-row-gap: sets the row spacing
  2. Grid-column-gap: sets the column spacing
  3. grid-gap:

These three attributes are relatively simple, not to mention that at the beginning of this article, we also set spacing in the public CSS file, and the previous renderings were also spaced.

justify-items | align-items | place-items

Use to set the alignment of grid elements (or the contents of each cell) left, right, middle, right, and bottom horizontally and vertically, or to stretch.

  1. justify-items: start | end | center | stretch
  2. align-items:start | end | center | stretch
  3. place-items: |

Let’s look at an example:

.container { justify-items: stretch; // Default value align-items: stretch; // Default value}Copy the code

The effect is as follows:

Let’s look at the other values:

.container {
    justify-items: start;
    align-items: end; 
 }
Copy the code

The effect is as follows:

Take a look at the middle effect:

.container {
    justify-items: center;
    align-items: center; 
 }
Copy the code

justify-content | align-content | place-content

  1. justify-content: stretch | start | end | center | space-between | space-around | space-evenly;
  2. align-content: stretch | start | end | center | space-between | space-around | space-evenly;
  3. Place-content: combined notation

First, let’s look at the default:

.container {
    justify-content: start; 
    align-content: start;    
}
Copy the code

The effect is as follows:

Take a look at the middle effect:

.container {
    justify-content: center; 
}
Copy the code

The effect is as follows:

Likewise, if: justify-content: end; Is displayed on the right.

Take a look at space-around:

.container {
    justify-content: space-around; 
}
Copy the code

The effect is as follows:

Finally, look at: space-instituted

.container {
    justify-content: space-evenly;
}
Copy the code

The effect is as follows:

Note: A closer look at the difference between a space-around and a space-evenly column will ensure that the left and right sides of each column are evenly spaced, so that, say, the left of the second column and the right of the first column add up to twice the distance, but the space-evenly will just purely control the spacing between the columns.

Finally, let’s take a look: space-between

.container {
    justify-content: space-between;
}
Copy the code

The effect is as follows:

These properties are similar to the flex layout properties, so you can compare them to see what they look like.

grid-auto-rows | grid-auto-columns | grid-auto-flow

Sometimes, some items are assigned locations outside of the existing grid. For example, the grid has only three columns, but an item is specified on row 5. At this point, the browser automatically generates an extra grid to place the project.

For example: A 3×3 grid looks like this:

We want to put the third item in row 4 and column 3. What do we do?

.container .item:nth-child(3){ grid-row-start: 4; grid-row-end: 5; grid-column: 3/4; // grid-column-start and grid-column-end; background: red; }Copy the code

The effect is as follows:

.container { grid-auto-rows: 100px; } .container .item:nth-child(3){ grid-row-start: 4; grid-row-end: 5; grid-column: 3/4; // grid-column-start and grid-column-end; background: red; } // Note: grid-row-start grid-column-start grid-column is the attribute of the project, which is used to set the horizontal and vertical direction of the project starting grid line and grid line, i.e. the position of the project in which row and column. We'll talk about it in detail belowCopy the code

The effect is as follows:

Finally, let’s look at the final container property, grid-auto-flow, which sets the alignment of items, either horizontally or vertically by default

.container {grid-auto-flow: row// Default}Copy the code

Change the vertical direction:

.container {
    grid-auto-flow: column
}
Copy the code

The effect is as follows:

Project related attributes

  1. Grid-column-start: The vertical grid line with the left border
  2. Grid-column-end: the vertical grid line with the right border
  3. Grid-row-start: horizontal grid line with the top border
  4. Grid-row-end: the horizontal grid line with the bottom border
  5. The grid – row | grid – column: abbreviations
  6. Grid-area: Sets the area name of the project

For example, the following results are achieved:

.container{
    display: grid;
    grid-template-rows: repeat(4, 50px);
    grid-template-columns: repeat(4, 50px);
    grid-gap: 10px 10px;
    grid-auto-rows: 50px;
}
.container .item:nth-child(5){
    grid-row: 2/4;
    grid-column: 2/4;
}

Copy the code

With these attributes, you can control the location and size of items, which is similar to merging cells.

Following the above example, the following effect is achieved:

When you see this effect, you might think that you can set context-items and align-items to center,

True, but context-items and align-items are container properties that are valid for all items. What if we just want to set one cell?

.container .item:nth-child(5){
    justify-self: center;
    align-self: center;
}
Copy the code

Similarly, you can abbreviate: place-self: center center;

At this point, grid layout related attributes are introduced, related attributes are more, also easy to confuse, more or in our project to practice use, of course, the premise is not high requirements for compatibility.

Here are some websites to refer to along the way:

  1. Is the future of front-end page layout Flexbox or Grid? www.zhihu.com/question/28…
  2. Zhang Xinxu: www.zhangxinxu.com/wordpress/2…
  3. Nguyen one: www.ruanyifeng.com/blog/2019/0…
  4. Flex vs the grid: blog.csdn.net/iac743nj0b/…