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
领取专属 10元无门槛券
私享最新 技术干货