1.什么是grid布局?
网格布局、将容器划分成行和列,产生单元格,然后指定项目所在的单元格,可以将它看成二维布局。
个人理解:
传统布局(position、float等):兼容效果最好,效率较低。
flex布局: 兼容性强,基于行和列的布局,可以看成一维布局。
grid布局:基于二维布局,适用于页面大块的搭建,十分便于操作。
2.设置gird布局:
display:grid // 制定一个容器为grid布局,容器元素为块级元素
dispaly:inline-grid // 容器元素为内联块
3.grid布局两种实现思路
grid-template-columns // 定义每一列的列宽
grid-template-rows // 定义每一行的行高
1.grid-column-start +grid-row-start 等 设置单元格位置
使用grid-template-columns+grid-template-rows 划分单元格后,在每个单元格的css中设置网格线开始结束位置。
基本属性:
grid-column-start // 左边框所在的垂直网格线
grid-column-end //右边框所在的垂直网格线
grid-row-start //上边框所在的水平网格线
grid-row-end //下边框所在的水平网格线
grid-row-gap //设置行与行的间隔(行间距)
grid-column-gap //设置列与列的间隔(列间距)
2.grid-area+grid-template-areas 将每一个项目、单元写出来
使用grid-template-columns+grid-template-rows 划分单元格后,在使用grid布局容器中,写出每个容器的位置。
grid-are //指定项目放在哪一个区域
grid-template-areas //网格布局允许指定"区域"(area),一个区域由单个 //或多个单元格组成
. 代表空
3.实现九宫格
grid-template-columns +grid-template-rows
4.其他
gird布局文档: CSS Grid 网格布局教程 - 阮一峰的网络日志
开发时可以使用,属性查询起来用很方便
grid布局游戏:Grid Garden - A game for learning CSS grid layout
grid布局上手并不难,创建一个html文件敲一下,更容易理解属性。