新的主题采用最强大的css布局方式——grid布局

最近新发现一个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-startgrid-column-startgrid-row-endgrid-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布局还要强大的多