重复 | repeat

repeat

repeat()表示跟踪列表的重复片段, 允许大量显示重复模式的列或行以更紧凑的形式编写。

这个函数可以用在CSS Grid属性grid-template-columns和grid-template-rows。

/* <track-repeat> values */
repeat(4, 1fr)
repeat(4, [col-start] 250px [col-end])
repeat(4, [col-start] 60% [col-end])
repeat(4, [col-start] 1fr [col-end])
repeat(4, [col-start] min-content [col-end])
repeat(4, [col-start] max-content [col-end])
repeat(4, [col-start] auto [col-end])
repeat(4, [col-start] minmax(100px, 1fr) [col-end])
repeat(4, [col-start] fit-content(200px) [col-end])
repeat(4, 10px [col-start] 30% [col-middle] auto [col-end])
repeat(4, [col-start] min-content [col-middle] max-content [col-end])

/* <auto-repeat> values */
repeat(auto-fill, 250px)
repeat(auto-fit, 250px)
repeat(auto-fill, [col-start] 250px [col-end])
repeat(auto-fit, [col-start] 250px [col-end])
repeat(auto-fill, [col-start] minmax(100px, 1fr) [col-end])
repeat(auto-fill, 10px [col-start] 30% [col-middle] 400px [col-end])

/* <fixed-repeat> values */
repeat(4, 250px)
repeat(4, [col-start] 250px [col-end])
repeat(4, [col-start] 60% [col-end])
repeat(4, [col-start] minmax(100px, 1fr) [col-end])
repeat(4, [col-start] fit-content(200px) [col-end])
repeat(4, 10px [col-start] 30% [col-middle] 400px [col-end])

语法

取值

<length>非负长度

行为与auto-fill相同，除了在放置网格项之后，任何空的重复轨道被折叠。一个空的轨道是一个没有流入网格项目或跨越其中的项目。（这可能会导致所有曲目被折叠，如果它们都是空的。）

折叠轨道被视为具有固定的轨道大小函数。0px它两边的装订线会收缩。

为了查找自动重复轨道的数量，用户代理将轨道大小设置为用户代理指定的值（例如1px），以避免被零除。

形式语法

Syntax not found in DB!

例

CSS

#container {
  display: grid;
  grid-template-columns: repeat(2, 50px 1fr) 100px;
  grid-gap: 5px;
  box-sizing: border-box;
  height: 200px;
  width: 100%;
  background-color: #8cffa0;
  padding: 10px;
}

#container > div {
  background-color: #8ca0ff;
  padding: 5px;
}

HTML

<div id="container">
  <div>
    This item is 50 pixels wide.
  </div>
  <div>
    Item with flexible width.
  </div>
  <div>
    This item is 50 pixels wide.
  </div>
  <div>
    Item with flexible width.
  </div>
  <div>
    Inflexible item of 100 pixels width.
  </div>
</div>

结果

规范

Specification	Status	Comment
CSS Grid LayoutThe definition of 'repeat()' in that specification.	Candidate Recommendation	Initial definition

浏览器兼容性

Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	57.01	No support	52.0 (52.0)2	No support	44.03	No support4

Feature	Android	Edge	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	?	No support	52.0 (52.0)2	No support	?	No support