CSS 函数

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 - 在最大值时，它对应于最大内容。其最小值表示网格轨道内网格项目的最大最小尺寸（由 min-width/min-height 定义）。

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>