最近新发现一个hugo主题，https://github.com/zzossig/hugo-theme-zzo，觉得好看便改成了wordpress主题用到了自己的博客上，然后发现这个主题的css样式写的我有点看不懂，原来是用的grid布局，了解了一下发现这个布局方式好强大啊
首先是wrapper元素把整个页面分成4行（nav，header，main，footer）和3列
然后项目的grid-area属性指定这个项目在容器（container）的哪个位置
grid-area属性还可用作grid-row-start、grid-column-start、grid-row-end、grid-column-end的合并简写形式，直接指定项目的位置。
四个数字可以简单记为逆时针方向
然后main元素为内容主体，main元素即为container的项目，也是内容（文章列表）和sidebar的父元素（作为gird容器存在）
main元素分为三列，grid-template-columns属性指定了sidebar为266px，左边两列为1:1比例
不过我不知道为什么原主题作者为什么把这里分为三列，我在firefox中把这里调成两列也是没问题的，只要将容器设为grid-template-columns: auto 266px;，然后左边内容区域设为grid-area: 1 / 1 / 2 / 2;，右侧的sidebar设为grid-area: 1 / 2 / 2 / 3;即可
这样方便很多，也更直观，我以前写主题，sidebar都是通过float写的了。gird布局比现在bootstrap和bulma用的flex布局还要强大的多