.con {
  display: grid;
  
/*   grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(3, 100px); */
  
  grid-template-areas: 
    'a b c'
    'd e f'
    'g h i';
  
  /*  允许单元格合并  */
  grid-template-areas:
    'a a a'
    'b b b'
    'c c c';
  
  grid-template-areas: 
    'header header header'
    'main main sidebar'
    'footer footer footer';
}

.item {
  font-size: 2em;
  text-align: center;
}

.item-1 {
  background-color: #ef342a;
  grid-area: header;
}

.item-2 {
  background-color: #f68f26;
  grid-area: main;
}

.item-3 {
  background-color: #4ba946;
  grid-area: sidebar;
}

.item-4 {
  background-color: #0376c2;
  grid-area: footer;
}

.item-5 {
  background-color: #c077af;
}