CSS 函数 - repeat（）

上一页
下一页

CSS 函数 repeat（） 用于表示标题列表的重复部分，这是一种更简洁的方式来定义具有重复模式的大量列或行。

此功能可以在 CSS 网格属性 grid-template-columns 和 grid-template-rows 中使用。

repeat（） 函数接受两个参数：

  • repeat count：第一个参数定义曲目列表应重复的频率。它可以设置为 1 或更大的整数值，也可以设置为关键字 auto-fill 或 auto-fit。
  • tracks：第二个参数选择应复制哪些轨道。<track-size> 或 <fixed-size> 变量可用于提供定义这些轨道的一个或多个大小值。

可能的值

<fixed-size>

可以采用以下形式之一：

<flex> - 具有非负值的维度，它使用单位 fr 来指示轨迹的柔韧性因子。

<length> - 正整数长度。

<line-names> - 一个或多个 <custom-ident> 值用空格分隔，并用方括号括起来，例如：[first header-start]。

<percentage> - 为列网格轨道提供的 <percentage> 数字基于网格容器的内联大小，而对于行网格轨道，它基于网格容器的块大小。如果网格容器的轨道控制其大小，则< percentage> 被视为自动。

auto - 在最大值下，它对应于 max-content。在最小值下，它表示网格轨道中网格项的最大最小大小（由最小宽度/最小高度定义）。

auto-fill：根据需要自动创建任意数量的轨道以填充网格容器，而不会导致溢出。这将同时显示空轨道和已填充轨道。请注意，空轨道是没有网格项的列或行。

auto-fit：根据需要自动创建任意数量的轨道以填充网格容器，而不会造成溢出。它将空轨道折叠为 0px。请注意，空轨道是没有网格项的列或行。

max-content - 它表示放置在网格轨道中的网格元素对 max-content 的最大贡献。

min-content - 它表示网格轨道内网格项的最大最小内容贡献。

CSS repeat（） - 使用 auto-fit 和 minmax（）

在以下示例中，CSS 属性 grid-template-columns 使用 repeat（） 函数创建响应式网格布局。

auto-fit 参数根据可用空间动态调整列数，minmax（200px， 1fr） 指定每列的宽度应至少为 200 像素，但可以与可用空间成比例增长。


<html>
<head>
<style>
	 	body {
	 	 	 font-family: 'Arial', sans-serif;
	 	 	 margin: 20px;
	 	 	 background-color: #f4f4f4;
	 	 	 color: #333;
	 	}
	 	.container {
	 	 	 display: grid;
	 	 	 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	 	 	 gap: 20px;
	 	}
	 	.grid-item {
	 	 	 background-color: #3498db;	
	 	 	 padding: 20px;
	 	 	 text-align: center;
	 	 	 color: white;
	 	 	 border-radius: 8px;
	 	 	 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	 	}
	 	@media (max-width: 600px) {
	 	 	 .container {
	 	 	 	 	grid-template-columns: repeat(1, 1fr);
	 	 	 }
	 	}
	 	@media (min-width: 601px) and (max-width: 900px) {
	 	 	 .container {
	 	 	 	 	grid-template-columns: repeat(2, 1fr);
	 	 	 }
	 	}
	 	@media (min-width: 901px) and (max-width: 1200px) {
	 	 	 .container {
	 	 	 	 	grid-template-columns: repeat(3, 1fr);
	 	 	 }
	 	}
	 	@media (min-width: 1201px) {
	 	 	 .container {
	 	 	 	 	grid-template-columns: repeat(4, 1fr);
	 	 	 }
	 	}
</style>
</head>
<body>
<div class="container">
	 	<div class="grid-item">Item 1</div>
	 	<div class="grid-item">Item 2</div>
	 	<div class="grid-item">Item 3</div>
	 	<div class="grid-item">Item 4</div>
	 	<div class="grid-item">Item 5</div>
	 	<div class="grid-item">Item 6</div>
	 	<div class="grid-item">Item 7</div>
	 	<div class="grid-item">Item 8</div>
	 	<div class="grid-item">Item 9</div>
	 	<div class="grid-item">Item 10</div>	
</div>
</body>
</html>
打印本页
上一页
下一页