文章目录
- 网格概念
- grid-template-rows和grid-template-columns
- grid-gap/gap
- grid-auto-rows
- auto-fill、minmax
- auto-fit和auto-fill的区别
网格概念
网格布局也是作用于两级DOM结构的，设置display:grid;的元素为网格元素，它的子元素就是网格元素。
网格线：网格线构成了网格的架构，有垂直和水平，如果指定了grid-gap，它就位于网格线上。
网格轨道：一个网格轨道就是两条相邻的网格线之间的空间
网格单元：水平和垂直的网格轨道重叠的部分
网格区域：由多个网格单元组成的矩形区域
grid-template-rows和grid-template-columns
grid-template-rows和grid-template-columns定义了网格轨道。
- grid-template-rows定义行
grid-template-rows: 1fr 2fr 1fr; - grid-template-columns定义列
grid-template-columns: 1fr 2fr 2fr; 如下图所示，定义3行3列，第二行占据两个单位的高度，第二、三列分别占据两个单位宽度。
重复的写法：repeat(2,1fr 1fr),重复两次1fr 1fr，就是四列或者四行。
grid-gap/gap
设置行与列的间距，是row-gap 和 column-gap的简写：
grid-gap: 116px 7px;
grid-auto-rows
grid-auto-rows给每一行拥有相同的高度。
auto-fill、minmax
如果不想给每一行设置一个固定的大小，同时又希望能够限制它的最大值和最小值。如minmax(300px, 1fr)，
auto-fill是一个特殊值，设置以后，只要网格装得下，浏览器就会尽可能生成多的轨道，并且不会和minmax的限制产生冲突。如上图设置为：grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));，子元素最小宽度为300px，最大值为1fr。视口可以装下5个宽度为300px的列，一行有5列。如果视口变小了，一行的列数变少，如下图：
auto-fit和auto-fill的区别
如果网格元素不够填满所有网格轨道，auto-fill就会导致一些空的网格轨道。如果不希望出现空的网格轨道，可以使用auto-fit关键字代替auto-fill。它会让非空的网格轨道扩展，填满可用空间。
