CSS精心的网格布局

文章目录

• ​​网格概念​​
• ​​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定义了网格轨道。

1. grid-template-rows定义行​​grid-template-rows: 1fr 2fr 1fr;​​
2. grid-template-columns定义列​​grid-template-columns: 1fr 2fr 2fr;​​ 如下图所示，定义3行3列，第二行占据两个单位的高度，第二、三列分别占据两个单位宽度。

3. 

4.  

重复的写法：​​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。它会让非空的网格轨道扩展，填满可用空间。