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に対して3行3列に分ける

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
    }
  }