grid布局

1. 容器的属性： display:grid（默认块元素） display:inline-grid （行内块元素）

2. 设置行宽和列宽 grid-template-columns:设置列宽 grid-template-rows:设置行宽

   /* 定义每一列的列宽 */
    grid-template-columns: 100px 100px 100px;
    /* 定义每一行的行宽 */
    grid-template-rows: 100px 100px 100px; 

3. auto-fill 如果只知道单元格的大小，不知道容器的大小

 grid-template-columns:repeat(auto-fill, 80px);

4. fr

第二列单元格的宽度是第一列的2倍
 grid-template-columns: 1fr 2fr;

5. 网格线名称

grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];

6. 行间距与列间距

row-gap: 20px;
column-gap: 20px;

7. 区域

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

8. 设置单元格的水平位置和垂直位置

     justify-items:start;
     align-items: start;

9. 整体的内容

justify-content: center;
align-content: center;
简写： align-content justify-content;