Grid 布局不完全指北

PS: 文章是个人学习笔记，阅读需要对几种布局方式尤其是Flexbox布局有一些了解。

网格布局用于将页面分割成数个主要区域，用来定义组件内部元素间大小、位置和图层之间的关系。它是二维的系统，意味着可以同时操作行和列。

浏览器支持情况：

使用网格布局首先要声明类型（注意在Grid布局里column, float, clear 和 vertical-align 不会生效。）

1 grid-template-columns 表示每一行如何划分,grid-template-rows 表示每一列如何划分

可以给每一行列加上名字,名字可以多个

如果有重复的地方可以使用repeat表示，以下两句意思一样

可以使用fr来代表一部分

2 grid-template-areas

3 grid-template 是上面三个属性合并的简写，语法格式为

下面两种写法效果一样

4 grid-column-gap 和 grid-row-gap 表示每行每列之间的间隔

参考：

http://chris.house/blog/a-complete-guide-css-grid-layout/

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

https://caniuse.com