CSS repeat()
函数表示轨道列表的重复片段,主要是用于网格显示重复模式的列或者行。repeat()
函数支持三种样式:<track-repeat>
、<auto-repeat>
、<fixed-repeat>
。该函数适用的属性: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>
:正整数长度<percentage>
:相对于列网格轨道中网格容器的行内大小以及行网格轨道中网格容器的块大小的非负百分比。如果网格容器的大小取决于它的轨道大小,那么<percentage>
必须被视为auto
。<flex>
:带有fr
单位的非负尺寸指定轨道的弹性系数。任何被<flex>
指定大小的轨道会根据其弹性系数按比例分配剩余空间。- max-content:代表占据网格轨道的网格项目所分配的最大内容区域的最大值。
- min-content:代表占据网格轨道的网格项目所分配的最小内容区域的最小值。
- auto:作为最大值,等同于
max-content
。作为最小值,它代表占据网格轨道的网格项目的最小尺寸的最大值 - auto-fill:果网格容器在相关轴上具有确定的大小或最大大小,则重复次数是最大可能的正整数,不会导致网格溢出其网格容器。
- auto-fit:行为与
auto-fill
相同,除了放置网格项目后,所有空的重复轨道都将折叠。空轨道是指没有流入网格或跨越网格的网格项目。
浏览器兼容性
repeat()函数所有浏览器均支持。
示例
<html>
<head>
<title>repeat()函数使用 </title>
<style>
#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;
}
</style>
<body>
<div id="container">
<div>
50px
</div>
<div>
flexible 宽度.
</div>
<div>
50px
</div>
<div>
flexible 宽度.
</div>
<div>
100px
</div>
</div>
</body>
</html>
结果显示: