Grid布局
目录
1. Grid语法小结
具体详细的CSS Grid的教程请看：
下面是我对CSS Grid的小结，方便速查使用。
小导航：
1-1. 6个重要概念
网格容器（grid container）：网格项的直接父元素
网格项（grid item）：网格容器的直接子元素
网格线（grid line）：垂直的网格线叫列网格线，水平的叫行网格线
网格轨道（grid track）：两条网格线之间的空间。可以看作是行或列
网格单元格（grid cell）：由相邻的列网格线和相邻的行网格线包围的区域
网格区域（grid area）：由不相邻的列网格线和不相邻的行网格线包围的区域。一个网格区域里面包含多个网格单元格
1-2. 网格容器的属性
- 【display】：
grid | inline-grid | subgrid将元素定义为网格容器 - 【grid-template-columns】：
<track-size> ... | [line-name] <track-size> ...设置列网格轨道的数目和大小（列网格线名字） - 【grid-template-rows】：
<track-size> ... | [line-name] <track-size> ...设置行网格轨道的数目和大小（行网格线名字） - 【grid-template-areas】：设置网格区域
- 【grid-template】：【grid-template-columns】、【grid-template-columns】和【grid-template-areas】的简写
- 【grid-column-gap】：
<line-size>设置列网格线的宽度 - 【grid-row-gap】：
<line-size>设置行网格线的宽度 - 【grid-gap】：【grid-column-gap】和【grid-row-gap】的简写
- 【justify-items】：
start | center | end | stretch列轨道的对齐方式（针对所有网格项内的内容） - 【align-items】：
start | center | end | stretch行轨道的对齐方式（针对所有网格项内的内容） - 【justify-content】：
start | center | end | stretch | space-around | space-between | space-evenly设置网格容器内的所有网格的对齐方式 - 【align-content】：
start | center | end | stretch | space-around | space-between | space-evenly设置网格容器内的所有网格的对齐方式 - 【grid-auto-columns】：
<track-size> ...设置任何自动生成的列网格轨道（aka 隐式列网格轨道）的大小 - 【grid-auto-rows】：
<track-size> ...设置任何自动生成的行网格轨道（aka 隐式行网格轨道）的大小 - 【auto-auto-flow】：
row | column | dense控制自动布局算法如何工作 - 【grid】：【grid-template-rows】、【grid-template-columns】、【grid-template-areas】、【grid-auto-rows】、【grid-auto-columns】和【auto-auto-flow】的简写。也可以是none，意思是将所有子属性设为其初值
1-3. 网格项的属性
- 【grid-column-start】：
<line-number> | <line-name> | span <number> | span <line-name> | auto设置网格项的左边列网格线的位置 - 【grid-column-end】：
<line-number> | <line-name> | span <number> | span <line-name> | auto设置网格项的右边列网格线的位置 - 【grid-column】：
<start-line> / <end-line> | <satrt-line> / span <value>【grid-column-start】和【grid-column-end】的缩写。两个值中间用“/”隔开 - 【grid-row-start】：
<line-number> | <line-name> | span <number> | span <line-name> | auto设置网格项上边的行网格线的位置 - 【grid-row-end】：
<line-number> | <line-name> | span <number> | span <line-name> | auto设置网格项下边的列网格线的位置 - 【grid-row】：
<start-line> / <end-line> | <satrt-line> / span <value>【grid-row-start】和【grid-row-end】的缩写。两个值中间用“/”隔开 - 【grid-area】：
<item-name> | <row-start> / <column-start> / <row-end> / <column-end>设置网格项的名字（这个名字，将在我们在设置【grid-template-areas】时使用） - 【justify-self】：
start | center | end | stretch设置网格项自身的列对齐方式 - 【align-self】：
start | center | end | stretch设置网格项自身的行对齐方式
2. Grid应用实例
Grid可以配合Flexbox（戳我看Flexbox小结）一起使用，实现许多漂亮的布局，一般是：
用Grid进行整体布局，用Flexbox实现局部布局。
实战视频：
一些布局实验小demo：
See the Pen Learn CSS Gird day1-1 by aLLeNxD (@AllenMinD) on CodePen.
See the Pen Learn CSS Gird day1-2 by aLLeNxD (@AllenMinD) on CodePen.
See the Pen Learn CSS Gird day1-3 响应式布局 by aLLeNxD (@AllenMinD) on CodePen.