gird-template: 30% 70% / 50% 50% ; item 的高度占比 / item 的宽度占比; 值为 '1 1' 时，为均分
grid-template-areas: "a c" "b d"; 布局对应的class 块； 通常子元素中配合使用： 如： grid-area: "a"
grid-gap: 10px 20px; // 上下间距 10px, 左右间距 20px
justify-items: start | end | center | stretch(默认) // 内容 横向的 对齐方向
align-items: start | end | center | stretch(默认) // 内容 纵向的 对齐方向
justify-content: || align-content: space-around 等 // 网格对齐位置
grid-template-areas: "a c" "b d"; 布局对应的class 块； 通常子元素中配合使用： 如： grid-area: "a"
grid-gap: 10px 20px; // 上下间距 10px, 左右间距 20px
justify-items: start | end | center | stretch(默认) // 内容 横向的 对齐方向
align-items: start | end | center | stretch(默认) // 内容 纵向的 对齐方向
justify-content: || align-content: space-around 等同 flex // 网格对齐位置
<div class="box">
<div class="a">a</div>
<div class="b">b</div>
<div class="c">c</div>
<div class="d">d</div>
</div>
.box {
height: 100%;
box-sizing: border-box;
display: grid;
grid-template: 30% 70% / 50% 50%;
grid-template-areas: "a c" "b d";
grid-gap: 10px;
justify-items: stretch;
justify-content: space-between;
align-items: stretch;
align-content: space-between;
overflow: hidden
}
.a{
grid-area: a;
}
.b{
grid-area: b;
}
.c{
grid-area: c;
}
.d{
grid-area: d;
}
