基本知识点

Grid布局和flex布局一样，也分container和items样式。Grid布局适用于二维布局，而flex布局更多用于一维布局。

container样式

grid-template-columns 可以通过该属性规划出次轴（列）的布局grid-template-rows 可以通过该属性规划出主轴（行）的布局grid-template-areas 可以通过该属性直接确定二维布局
示例：

//假设父元素container里面有5个items，分别是header、aside、main、ad、footer,html代码分别是
{
 <div>
   <header>header</header?
   <aside>aside</aside>
   <main>main</main>
   <div>ad</div>
   <footer>footer</footer>
 </div>
}
css代码：
.container{
 display:grid;
 grid-template-areas:
 "header header header"
 "aside main ad"
 "footer footer";//实际上就是三行三列
}
.container>header{
 grid-area:header; //意思是将header填满container中定义为header的区域
}
.container>aside{
 grid-area:aside; //意思是将aside填满container中定义为aside的区域
}
.container>.ad{
 grid-area:ad;
}
.container>footer{
 grid-area:footer;
}

属性取值:50px、25%、auto、1fr（free space,可以简记为份)。

items样式

grid-row-start 设置items所在行的起始位置grid-row-end 设置items所在行的最终位置grid-column-start 设置items所在列的其实位置grid-column-end 设置items所在列的最终位置grid-gap 规定items之间的空隙
grid-column-gap:规定items之间左右的空隙
grid-row-gap:规定items之间上下的空隙grid-template-areas 分区
备注：
以上属性的取值可以通过本身设置的行数列数以及确定设置行数列数的线条数量结合进行属性的取值，比如规划出一个三行五列的布局，规划出三行需要通过四根线来进行布局，如果想让items项占据一行，则取值需要取到第二根线的位置，以此类推。