1. Specify the container to use the grid layout:display: grid

2, specify that the container is set to within the line element and use the grid layout:display: inline-grid

3, define the column width of each column:grid-template-columns

4, define the row of each line:grid-template-row

5, repeat assignment:REPEAT (number of times, value)

6, automatic fill: such as:repeat(auto-fill,30px)

7, proportion:fr(like grid-template-columns: 1fr 2fr;It means that the container is divided into 2 columns, and the width of the second column is 2 times that of the column)

8, the length range:minmax()

9. Automatically populate the remaining space (without setting the minimum minimum value):auto

10, the grid line name, the same line can have multiple names:grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];

11, line spacing:grid-row-gap

12, column spacing:grid-column-gap

13, spacing:Grid-GAP: Row Potential Value Column Ports ValueThe line spacing and column pitch values ​​can only write a value

14. Regions: b to H correspond to seven regions..Indicates that the first area is not used; H represents two regions combined; the starting grid line of each area is automatically namedArea name -startTerminate the grid line automatically namedArea name -END；

grid-template-areas: '. b c'
                     'd e f'
                     'g h h';

15, filling order:grid-auto-flowBy default isrow, First fill the first line and then fill in a line;columnThe first column is filled in the second column first;row denseandcolumn denseIndicates that it is not filled with no blank

16, horizontal position, vertical position of cell content; defaultstretchMusic, filling the entire cell

justify-items: start | end | center | stretch;/*horizontal position*/
align-items: start | end | center | stretch;/ * Vertical position * /
place-items: 'horizontal position' 'Vertical position';/ * The parameter can only write only one value * /

17. Content block in the horizontal position, vertical position of the grid container; defaultstretchMusic, filling the entire cell

justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
align-content: start | end | center | stretch | space-around | space-between | space-evenly;  
place-content:'horizontal position' 'Vertical position';/ * The parameter can only write only one value * /

space-around  :  The interval between the cells is equal to twice the interval between the cell and the container border.
space-between :  Unit interval, etc., there is no interval between cells and container borders.
space-evenly  :  The cell interval and cells are equal to the interval between the container borders, etc.

18. Specify the unit properties outside the project:grid-auto-columns ，grid-auto-rows

19, merging attribute

grid-template: grid-template-columns grid-template-rows  grid-template-areas
grid: grid-template-rows grid-template-columns grid-template-areas  grid-auto-rows grid-auto-columns grid-auto-flow

20. The project is positioned according to the grid line.z-index

grid-column-start:2;
grid-column-end:3;
/ * Is equivalent to * /
grid-column:2 / 3

grid-row-start:4;
grid-row-end :5;
/ * Is equivalent to * /
grid-row: 4 / 5

21. Which area is specified?grid-area: a; grid-area: <row-start> / <column-start> / <row-end> / <column-end>;

22. Set the horizontal, vertical position of the cell content, only acting on a single item

justify-self: start | end | center | stretch;
align-self: start | end | center | stretch;
justify-self: start | end | center | stretch;