一：各种css属性

1、gird-template-columns

.app {
      border: 1px solid #333;
      /* width: 1200px; */
      height: 500px;
      display: grid;
      /* display: flex; */
      /* grid-template-columns: 1fr 2fr 1fr; 设置3列平分宽度 剩余换行*/
      /* grid-template-columns: repeat(9, 1fr); 设置9列平分宽度 剩余换行排列 */  
      /* grid-template-columns: repeat(3, 100px 80px 50px); 重复3列剩余换行*/
      /* grid-template-columns: repeat(3, 100px 80px ); */
      /* grid-template-columns: 1fr minmax(200px, 1fr); 设置两列 最小宽度和超过宽度时的宽度*/
      grid-template-columns: 100px auto 300px;
    }

2、row-gap: 10px; column-gap: 20px; gap: 10px(row) 20px(column)

.app {
      row-gap: 20px;    /* 设置行间隔 */
      column-gap: 20px;  /* 设置列间隔*/
      gap: 40px 20px;   /* 设置行和列的间隔  简写*/
}

3、gird-auto-flow：row（默认按行排列）；默认按照行还是列排列

.app {
  gird-auto-flow: row,; /* 默认按行排列 */
    gird-auto-flow: column;  /* 默认按列排列 */
}