html5重复网格线
作者：佚名 时间：2014-06-15
目前为止,本章所定义的网格都很易学习,且能应用于一些实际情况,然而为了实现更好的控制性能,常常会用到更复杂的网格,12列或者16列的网格是最常见的,每两列之间通常还有一个孔(gutter,空白的间隔)用来把相邻列隔开.但如果使用网格而已语法,即使是6列带孔的网格的代码都是十分繁琐的:
e{grid-columns;1fr 10px 1fr 10px 1fr 10px 1fr 10px 1fr;}
想象如果有16列的话代码有多繁琐吧,为了解决这个问题,可以使用repeat()函数.此函数有两个参数:一个用来设置重复次数的整数,另一个是要被重复的网格线的值:
e{grid-columes:1fr repeat(5,10px 1fr);}
此行代码定义了一个轨迹,它宽1个fr,然后把一个10像素和1fr的样式重复4次,和上例中的代码是等效的.
ie10使用的是一个老版本标准的语法,此语法里重复次数这个参数放在圆周括号后面的一个方括号里,若要为win8的界面设计应用,则用以下语句:
e{ -ms-grid-columns:1fr repaet(10px 1fr)[5];}
如没特殊注明，文章均为上海联楷网络原创,转载请注明来自：http://www.linksj.com/hynews/20151126/n3348.html
