HTML5重复网格线

时间：2014-6-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];}