.container{
    /*让一个东西成为Grid的container*/
    display:grid | inline-grid; 

    /*划分一个container的区域，使他成为三行五列*/
    /*每一行的宽度*/
    grid-template-columns: 40px 50px auto 50px 40px;
    /*每一列的宽度*

关于grid布局的详情也可以参考CSS tricks:

https://css-tricks.com/snippets/css/complete-guide-grid/​css-tricks.com/snippets/css/complete-guide-grid/

grid布局也分container和items，使一个容器成为container的方法是 display:grid/inline-grid

当一个元素变为grid的container容器时，可以通过两个属性来划分，下面给出官网的截图

当一个元素被划分后就成了网格装，其中每根线都有编号，如上图，grid布局的具体样式太多
同样下面给出我整理的样式：

.container{

    grid-template-rows: 50px 80px auto;
    /*也可以通过分数来分*/
    /*把宽平均分成三份*/
    grid-template-row: 1fr 1fr 1fr;
    /*把列平均分成两份*/
   grid-template-column: 1fr 1fr;

   /*空隙*/
    grid-gap:12px;/*空隙12px*/
    /*也可以来设置上下和左右grid-column-gap和 grid-row-gap*/
}

.items{
    /*横向从第几根线开始*/
    grid-row-start:1;
    /*横向从第几根线结束*/
    grid-row-end:4;
    /*纵向从第几根线开始*/
    grid-column-start:1;
    /*纵向从第几根线结束*/
    grid-column-end:4;

}
/*页面中有：header，aside，main，div，footer*/

/*用grid-template-areas来布局*/
.container{
    grid-template-areas:
    "header header header"
    "aside main ad"
    "footer footer footer"
    /*如果想空着可以用.来代替*/
}
header{
    /*让header占据header的位置*/
    grid-area:header;
}