CSS-grid grid layout

GridLayout (grid layout)
first describes several layout methods that I often use:

Normal document flow: inline elements are sorted from left to right, block-level elements are sorted from top to bottom
float+clear float+clear
position positioning layout
display:inline-block; inline layout
negative margin layout
elastic layout

Advantages of grid layout: Flex layout is an axis layout. It can only specify the position of the item on the axis. It can be regarded as a one-dimensional layout. This is a two-dimensional layout. The advantage is that it can handle rows and columns at the same time. Grid layout is currently in many browsers. All devices can support it. For detailed compatibility, go to Caniuse to check.

Grid layout properties:

1. grid-template-column set column
2. grid-template-row set row
3. grid-template-areas positioning space
4. Grid-template (1) and (2) and (3) combine abbreviations
5. grid-row-gap
6. grid-column-gap
7. Shorthand for grid-gap 5,6
8. …

Build a grid using grid-template-columns, grid-template-rows

.container{
    
    
  width:400px;
  height:300px;
  border:1px solid red;

  display:grid;      /*grid布局*/
  grid-template-columns:10% auto 10%;  /*设置列*/
  grid-template-rows:50px auto 50px;   /*设置行*/
}

1.repeat()

grid-template-columns:repeat(3,100px);

The first is the number of repetitions, and the second parameter is the value to be repeated

2.auto-fill

Sometimes, the size of the cell is fixed, but the size of the container is not, and this property will be filled automatically.
grid-template-columns:repeat(auto-fill,100px);

3.fr

In order to conveniently express the proportional relationship, the grid layout provides the fr keyword. The abbreviation of fraction, meaning "fragment";

grid-template-columns:repeat(3,1fr);//三等分
grid-template-columns:1fr 2fr 3fr;//按比例 1：2：3

4.minmax()

The function generates a length range, indicating that the length is within this range. It can accept two parameters, which are expressed as the minimum value and the maximum value.

grid-template-columns:1fr minmax(150px,1fr) //The minimum will not be less than 150px

5.auto

Indicates that the length is determined by the browser itself
grid-template-columns: 100px auto 100px (the width in the middle is determined by the browser and allocated automatically)

6. Gridlines

You can use square brackets to define the grid line name, which is convenient for 以后引用
grid-template-columns : [c1] 100px [c2] 100px;

row-gap/gap

It is the distance between grid-item
grid-column-gap:20px;
grid-row-gap:20px;

grid-gap:20px;

:::warning
According to the new standard, the grid- prefix has been removed row-gap column-gap gap
:::

grid-template-area

A range consists of single or multiple cells, it's up to you

grid-template-areas:‘a b c’
‘d e f’
‘g h i’;

grid-auto-flow

• dense dense, high space utilization

alignment

The alignment property written on the container, justify-items (horizontal direction) aligns all items / align-items vertical direction aligns all items.
_ for all items.

Each item is aligned to the left and to the right in its own grid. _

justify-items:start/end/center/stretch;

justify-content (horizontal direction) / align-content (vertical direction)

All the content in the container is packaged together, called content. All content becomes a lump of alignment.

grid-auto-columns / grid-auto-rows