.grid {
  display: grid;
  height: 500px;
  border: 1px solid #000;
  place-content: center;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  /*浏览器自动生成多余的列宽和行高 */
  grid-auto-columns: 50px;
  grid-auto-rows: 50px;
}
.item {
  background: #80cac8;
}
.item:nth-child(2){
  background: #f0eca7;
}
.item:nth-child(3){
  background: #a0c0de;
}
.item:nth-child(4){
  background: #eea7ba;
}
.item:nth-child(5){
  background: #8e81e8;;
}
.item:nth-child(6){
  background: #e29e91;;
}
.item:nth-child(7){
  background: #adeaae;
  grid-row-start: 4;
  grid-column-start: 1;
}





Resources