之前,总是想学grid二维布局,介于浏览器兼容性不好以及grid的难度太大,所以很少用,就一直往后放。近期,被朋友又问起grid的一些用法,发现自己也不是很确定,就准备静下来,学一学这个“GFC- 网格块级格式化布局方式。

之前,网站也整理过关于gird的相关知识:css中的渲染规则:Formatting context,你100%用过它,可惜你不知道!,但是没有这篇详细!

Grid基本知识

单元格:n行和m列会产生n * m个单元格
网格线:n行有n + 1根水平网格线;m列有m + 1根垂直网格线
单元格大小:
grid-template-columns 列宽   grid-template-rows 行高
实例练习:https://course.51qux.com/grid_cell

间距:grid-gap,是grid-column-gap(行间距)和grid-row-gap(列间距)的合并简写形式
实例练习:https://course.51qux.com/gap

区域:grid-template-areas

横竖排版切换:grid-auto-flow,默认先行后列;grid-auto-flow: column 变成"先列后行"

justify-items 属性,设置单元格内容的水平位置
align-items 属性,设置单元格内容的垂直位置
place-items 属性,是align-items属性和justify-items属性的合并简写

justify-content 属性,整个内容区域在容器里面的水平位置
align-content 属性,整个内容区域的垂直位置
place-content 属性,place-content属性是align-content属性和justify-content属性的合并简写

justify-self 属性,设置单元格内容的水平位置
align-self 属性,设置单元格内容的垂直位置
place-self 属性,是align-self属性和justify-self属性的合并简写

grid-auto-columns 属性,创建的多余网格的列宽
grid-auto-rows 属性,创建的多余网格的行高

grid-template 属性,是grid-template-columns、grid-template-rows和grid-template-areas这三个属性的合并简写
grid 属性,是grid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flow这六个属性的合并简写

grid-column-start 属性,单元格左边框所在的垂直网格线
grid-column-end 属性,单元格右边框所在的垂直网格线

grid-row-start 属性,单元格上边框所在的水平网格线
grid-row-end 属性,单元格下边框所在的水平网格线

grid-column 属性,是grid-column-start和grid-column-end的合并简写
grid-row 属性,是grid-row-start属性和grid-row-end的合并简写

grid-area属性,指定项目放在哪一个区域;还可用作grid-row-start、grid-column-start、grid-row-end、grid-column-end的合并简写,直接指定项目的位置