gird-template: 30% 70% / 50% 50% ; item 的高度占比 / item 的寬度占比; 值為 '1 1' 時(shí)秒啦，為均分
grid-template-areas: "a c" "b d";? 布局對(duì)應(yīng)的class 塊； 通常子元素中配合使用： 如： grid-area: "a"
grid-gap: 10px 20px; // 上下間距 10px, 左右間距 20px
justify-items: start | end | center | stretch(默認(rèn)) // 內(nèi)容 橫向的 對(duì)齊方向
align-items:? start | end | center | stretch(默認(rèn)) // 內(nèi)容 縱向的 對(duì)齊方向
justify-content: || align-content:? space-around 等? // 網(wǎng)格對(duì)齊位置
grid-template-areas: "a c" "b d";? 布局對(duì)應(yīng)的class 塊喇辽； 通常子元素中配合使用： 如： grid-area: "a"
grid-gap: 10px 20px; // 上下間距 10px, 左右間距 20px
justify-items: start | end | center | stretch(默認(rèn)) // 內(nèi)容 橫向的 對(duì)齊方向
align-items:? start | end | center | stretch(默認(rèn)) // 內(nèi)容 縱向的 對(duì)齊方向
justify-content: || align-content:? space-around 等同 flex? ?// 網(wǎng)格對(duì)齊位置
<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;
? ? }
