CSS 函数 - repeat()

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

此函数可在 CSS 网格属性 grid-template-columns 和 grid-template-rows 中使用。

repeat() 函数接受两个参数

重复次数：第一个参数定义应重复轨道列表的次数。可以使用 1 或更高的整数，或者使用关键字 auto-fill 或 auto-fit。
轨道：第二个参数选择要复制的轨道。<track-size> 或 <fixed-size> 变量可用于提供一个或多个定义这些轨道的尺寸值。

可能的值

<fixed-size>

可以采用以下几种形式之一：

一个 <length-percentage> 值
一个 minmax 函数，其中 min（作为 <length-percentage> 给出），max（表示为 <length-percentage> 值、<flex> 值或关键字：min-content、max-content 或 auto）
一个 minmax 函数，其中 min（作为 <length-percentage> 或关键字：min-content、max-content 或 auto 给出），max 作为 <length-percentage> 值给出。

<flex> - 使用单位 fr 指示轨道灵活性的尺寸，其值为非负值。

<length> - 正整数长度。

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

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

auto - 最大值对应于 max-content。最小值表示网格轨道内网格项目（由 min-width/min-height 定义）的最大最小大小。

auto-fill：自动创建尽可能多的轨道以填充网格容器，而不会导致溢出。这将显示空轨道和填充轨道。请注意，空轨道是没有网格项目的列或行。

auto-fit：自动创建尽可能多的轨道以填充网格容器，而不会导致溢出。它将空轨道折叠为 0px。请注意，空轨道是没有网格项目的列或行。

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

min-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>

打印页面