CSS grid-template-columns属性探讨|给你代码

yumo6665个月前 (08-02)技术文章50

CSSgrid布局

CSS grid布局是一种很强大的布局，兼容性如上表所示，表现在控制台里，你可以清楚看到他的内部每一个块都由一个虚线方块组成。他的每行每列都会生产一个单元格，而划分他们之间的线称为网格线。我这次就主要讲述其中两个属性。

内容

1.grid-template-columns(rows), 他可以的定义网格列或者行的维度大小，在属性数值上，除了比较常用的属性，还支持fr，flex弹性系数，可以根据该数值比例来分配剩余空间。还有[xx]在属性数值里定义网格线的名称，方便以后再次引用他。还有repeat属性。

如图所示的样式，是类似列表一样有很多重复的模块，就可以用到repeat属性来进行重复。

repeat(5, 250px);类似这样的属性数值。那么我就想了，如果只是这样，普通的布局也能实际，为啥要用这个repeat呢。如果我想自适应宽度变化可以吗？答案是支持的。repeat还支持auto-fill, auto-fit这2个属性能进行自动填充，配合minmax属性可以实现根据宽度进行子列表的自适应布局。如：repeat(auto-fill, minmax(100px, 1fr)); 代表了自动填充，minmanx最小值，配合flex分配空间。

关于autfo-fit，autofill的区别在mdn上有解释，但是可能难理解，直接利用mdn上2个例子。

grid-template-columns: repeat(auto-fill, minmax(10px, 1fr));

grid-template-columns: repeat(auto-fit, minmax(10px, 1fr));

可以清楚的看到，在网格不能填满一行的时候，auto-fit会尽可能的让元素去填满他，也就是说剩余的空间会被分配到每个元素上,而auto-fill还是按照原来的布局，模拟元素可以填满一行的情况。

2.grid-gap设置网格行和列之间的间隙大小

兼容情况如下图所示：

根据mdn文档，实验中的功能gap(grid-gap)属性也被flex布局所支持。但是兼容性应该不好太好。

gap属性有什么用呢？

如上图布局,如果支持gap，那么只要之间写一个gap: 1px就可以了。不然的话，就比较繁琐了，只能利用边距去实现。