https://css-tricks.com/

二维布局 grid父 容器 子grid items

.container{
  display:grid/inline-grid;
}

.container{
  min-height:400px;
  display:grid;
  grid-template-columns:50px 20px 30px;
  grid-template-rows:30px 50px 30px;
}

.a{
  grid-row-start:1;
  grid-row-end:3;
  grid-column-start:1;
  grid-column-end:3;
}

grid-template-columns:1fr 2fr 1fr;
  grid-template-rows:2fr 1fr 1fr;

grid-column-gap:10px;

.container{
  min-height:400px;
  display:grid;
  grid-template-columns:1fr 2fr 1fr;
  grid-template-rows:2fr 1fr 1fr;
  grid-gap:10px;
}

*{
  margin: 0;
  padding: 0;
  box-sizing:border-box;
  border:1px solid red;
}
.container{
  display:inline-grid;
  grid-template-rows:60px auto 60px;
    grid-template-columns:60px auto 60px;
  grid-template-areas:
    "header header header"
    "aside main rside"
    "footer footer footer"
}
header{
  grid-area:header;
}
aside{
  grid-area:aside;
}
main{
  grid-area:main;
}
rside{
  grid-area:rside;
}
footer{
    grid-area:footer;
}

## 中间为空不显示时 用.或者x

grid-template-areas:
    "header header header"
    "aside main rside"
    ". footer footer"
}

http://js.jirengu.com/cimefoputa/4/edit?html,css,output

.container {
  display: grid;
  min-height: 100vh;
  min-width: 100vh;
  grid-template-rows: 240px repeat(4, 60px);
  grid-template-columns: 250px 250px;
  // grid-column-gap:10px;
  grid-template-areas: "big sm4" "big md1" "sm1 md1" "sm2 md2" "sm3 md2"
}
img:nth-child(1) {
  grid-area: big;
  background: #ccc;
}
img:nth-child(2) {
  grid-area: sm1;
  background: #bbb;
}
img:nth-child(3) {
  grid-area: sm2;
  background: #aaa;
}
img:nth-child(4) {
  grid-area: sm3;
  background: #333;
}
img:nth-child(5) {
  grid-area: sm4;
  background: #666;
}
img:nth-child(6) {
  grid-area: md1;
  background: #ddd;
}
img:nth-child(7) {
  grid-area: md2;
  background: #888;
}

用span关键字

grid-column-end/start:span 2 //跨两列

grid-column: 2 / 4;就会设置网格项从第二列开始，到第四列结束。
grid-column:2/ span 3
grid-area：grid-row-start/grid-column-start/grid-row-end//grid-column-end

#garden {
  display: grid;
  grid-template-columns:50% 50%;
  grid-template-rows: 20% 20% 20% 20% 20%;
}
#water {
  grid-column: 1;
  grid-row: 1;
}

grid-template-columns: repeat(5, 20%);


grid-template: 50% 50% / 200px;将创建一个具有两行的网格,每一行占据50%，以及一个200像素宽的列