display: grid小记

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;

    }