grid-template-columns属性(CSS设置)

发布时间：2021-09-15 18:16 所属分类：热门主题浏览次数：

　　grid-template-columns属性(CSS设置)

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

　　内容

　　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就能够了。否则的话，就比较繁琐了，只能使用边距去完成。

　　总结

　　cssgrid还有很多特点能够用来布局元素，本文仅仅只是讲到了一小点。它在现代浏览器中的支撑度仍是不错的，能够多多用它。假如支撑的浏览器兼容性不是太好的话，只能用其他东西来代替它了。