浅尝grid布局

通过display属性给容器设置grid属性，

设置列

    /* 默认显示一列 */
    display: grid;
    
    /* 设置列，设置3列，每列100px */
    grid-template-columns: 100px 100px 100px;
    
    /* 设置列，设置12列，每列50px */
    grid-template-columns: repeat(12, 50px);

    /* 设置列，每列100px，自动换行 */
    grid-template-columns: repeat(auto-fill, 100px);

    /* 设置列，每列最小值150px，最大值1fr */
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    
    /* 设置列，每列占三分之一 */
    grid-template-columns: 1fr 1fr 1fr;

设置行

    /* 设置行高 */
    grid-template-rows: 100px;
  
    /* 设置默认行高 */
    grid-auto-rows: 100px;

设置间隙

    /* 设置行的间隙 */
    grid-column-gap: 10px;

    /* 设置列的间隙 */
    grid-row-gap: 10px;

    /* 简写 <设置行和列的间隙都为20px> */
    gap: 20px 20px;

设置元素的布局

  .box {
  /* 第一行header占2格 */
    grid-template-areas: 
    "header header";
  }

  .header {
    /* 给元素取名 */
    grid-area: header;
  }