关于grid布局

一般来说 会有这样的写法

//使用的是less
#app {
  display: grid;
  grid-template-columns: 12% auto 12%;//三列分别的宽度
  grid-template-rows: auto 1fr auto;
  //三行 分别的高度  其中1fr代表尽量撑满  若未达到效果 在html 
  body #app 加上height: 100%
  grid-template-areas: "header header header"//第一行的三列分别为header 
                                               header可以理解为一个比那辆
                       ".  main ."//第二行的三列分别为  无  main wu 
                                    '.'点代表没有指定
                       "footer footer footer";//第三行的三列分别为footer

  #header{
    grid-area: header;//设置上面的header区域的元素
    padding-left: 12%;
    padding-right: 12%;
  }
  #main{
    grid-area: main;//设置main区域的元素
  }
  #footer{
    grid-area: footer;//设置footer区域的元素
    padding-left: 12%;
    padding-right: 12%; 
  }
}
//针对特殊情况max-width 设置的列宽度
@media (max-width: 768px) {
  #app{
    grid-template-columns: 10px auto 10px;

    #header, #footer{
      padding-left: 10px;
      padding-right: 10px;
    }
  }
}

针对#app中 分为三行 三列

• 1 如果是小布局 可以直接写grid

.item{
    display: grid;
    grid: auto auto / 80px 1fr; //  前面是行  后面是列
    
    .avatar{
      grid-column: 1; //该元素所处的位置列为第一个线到第二根线之间 grid-column: 1 / 2;
      grid-row: 1 / 3;//该元素所处位置行 为第一到第三跟线之间
     //less中可能会有bug  写为grid-row: 1 / span2 ；span2代表跨两个区域
      justify-self: center;// justify-self 表格里面的东西自动对齐 相似的还有align-self
    }
  }