Grid网格布局常用属性大全及用法

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

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

Grid基本知识

1.单元格：n行和m列会产生n * m个单元格

2.网格线：n行有n + 1根水平网格线；m列有m + 1根垂直网格线

3.单元格大小：
grid-template-columns 列宽   grid-template-rows 行高
实例练习：https://course.51qux.com/grid_cell

4.间距：grid-gap，是grid-column-gap（行间距）和grid-row-gap（列间距）的合并简写形式
实例练习：https://course.51qux.com/gap

5.区域：grid-template-areas

6.横竖排版切换：grid-auto-flow，默认(row）先行后列；grid-auto-flow: column 变成"先列后行"

7.设置单元格内容对齐方式

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

justify-items | align-items | place-items : start | end | center | stretch;

三者参数都一样。

更多效果：

8.设置整个内容区域在容器的位置

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

justify-content : start | end | center | stretch | space-around | space-between | space-evenly;

三者参数都一样。

其他对齐效果：

9.指定子元素内容对齐方式

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

justify-self: start | end | center | stretch;

三者参数都一样。

10.创建隐式grid网格

• grid-auto-columns 属性，创建网格的列宽
• grid-auto-rows 属性，创建网格的行高

区别在于：grid-auto-rows/columns 可以创建空白的占位空间 ；即便元素超过了grid的布局，后面的也会按照指定的列宽和行高进行布局。

11.单元格定位

• 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的合并简写，直接指定项目的位置。

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这六个属性的合并简写