grid布局

<div class="container">
  <div class="item item-1"></div>
  <div class="item item-2"></div>
  <div class="item item-3"></div>
</div>

一、基本概念

Grid Container
Grid Item
Grid Line
Grid Track
Grid Cell
Grid Area
二、常用属性

Grid Container 的全部属性

display:
grid-template-columns:
grid-template-rows:
grid-template-areas:
grid-template
grid-column-gap
grid-row-gap
grid-gap
justify-items
align-items
justify-content
align-content
grid-auto-columns
grid-auto-rows
grid-auto-flow
grid

Grid Items 的全部属性

grid-column-start
grid-column-end
grid-row-start
grid-row-end
grid-column
grid-row
grid-area
justify-self
align-self

用法如下：
css

<style lang="text/css">
    .container{
      display:grid;
      grid-template-columns: 25% 25% 25% 25%;
      grid-template-rows: 200px 200px 200px 200px;
      grid-column-gap: 10px;/*制定列网格线宽度*/
      grid-row: 10px;
      grid-gap:20px 10px;/*简写*/
      justify-items: center;/*start|end|center|stretch(沾满空间)也可以通过给单个 grid item 设置justify-self属性来达到上述效果。*/
      align-items: center;
      justify-content:center;/*网格大小大于容器大小时*/
      align-content: center;/**网格大小小于容器大小时*/
      grid-template-areas: "header header header header"
                           "main main . sidebar"
                           "footer footer footer footer"
    }
    .item{height: 100px;width: 300px;}
    .item-1{background: dodgerblue;grid-area: header;}
    .item-2{background: red;grid-area: main;}
    .item-3{background: green;grid-area: sidebar;}
    .item-4{background: blueviolet;grid-area: footer;}

  </style>

HTML
 <div class="container">
    <div class="item item-1">1</div>
    <div class="item item-2">2
        <p class="sub-item">这是ｐ</p>
    </div>
    <div class="item item-3">3</div>
    <div class="item item-4">4</div>
  </div>

效果如下