CSS的 display 属性更新了，发现几个CSS栅格布局的新姿势，挺有意思，刚好markdown也支持html解析，就在这里试试好了。
display: grid;
gird二维布局模式, 把空白通过格线分成一个一个小cell来完成布局，在浏览器自身不支持栅格前，我们想要做栅格，我第一个想到的是bootstrap的栅格; 而flex是单向伸缩，讲究一个streach和growth，二者有着本质不同。
居中对其
外层容器使用grid, 并设置place-items:center;，那内部cell会居中对其。
固定侧边菜单
这里涉及到了grid-template-columns属性，看到这个我们基本也就猜出来对容器中行的设置应该是grid-template-rows，这两个属性定义了容器中行于列的宽度。
另外一个是fr, 这个单位是单词fraction 的缩写。将没有绝对定义的空余空间进行按照给定单位进行百分比分割，其中1fr就代表了
分割后的一块；当然，如果只有一块，1fr就代表了剩下的全部
在这里，外层容器的style如下：
display:grid;grid-template-columns:minmax(150px,25%) 1fr
头、身体、脚
这里又引入了auto的概念，浏览器会根据auto部分中的内容自动调整空间大小，使用文档流中的最少内容来撑开空间。
/* 容器 */
display:grid;grid-template-rows:auto 1fr auto;height:400px;text-align:center;
圣杯
第一次知道这个布局叫做圣杯，大概是在16年，一个浸淫ie多年的老同事（负责带我）让我弄一个圣杯布局，我淡定的装作经常制作圣杯的样子。
这里我们使用到了grid-template, 聪明的我们已经知道了，这是和一个集合属性，将row和column的设置放在同一个属性中。
另外使用到了grid-column, 聪明的我们又知道了，这是用来设置cell宽度的，值是一个分数，代表了从第几条边开始，到第几条边结束的意思；当然不嫌麻烦的我们也可以分开写grid-colun-start和grid-colun-end。
三等分
也是一个比较常见的布局，思路也很简单，在容器外侧设置三个fr，并且值相同；设置相同的值，我们又可以使用repeat函数:
/* 容器 */
display:grid;grid-gap:1rem;grid-template-columns: repeat(3, 1fr);
列举了5种最常见的场景；适合做大布局。
