1. Web
  2. CSS
  3. repeat()

repeat()

Baseline 已廣泛支援

此特性已經十分成熟，可在許多裝置和瀏覽器版本上使用。自 2020 年 7 月以來，它已在各大瀏覽器中可用。

repeat() CSS 函式表示軌道列表的重複片段，允許以更緊湊的形式書寫大量具有重複模式的列或行。

試一試

grid-template-columns: repeat(2, 60px);

grid-template-columns: 1fr repeat(2, 60px);

grid-template-columns: repeat(2, 20px 1fr);

grid-template-columns: repeat(auto-fill, 40px);

<section class="default-example" id="default-example">
  <div class="example-container">
    <div class="transition-all" id="example-element">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </div>
</section>

#example-element {
  border: 1px solid #c5c5c5;
  display: grid;
  grid-auto-rows: 40px;
  grid-gap: 10px;
  width: 220px;
}

#example-element > div {
  background-color: rgb(0 0 255 / 0.2);
  border: 3px solid blue;
}

此函式可用於 CSS 網格屬性 grid-template-columns 和 grid-template-rows。

語法

css
/* <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])

repeat() 函式接受兩個引數

  • 重複次數：第一個引數指定軌道列表應重複的次數。它由一個大於等於 1 的整數值，或關鍵字值 auto-fill 或 auto-fit 指定。這些關鍵字值會重複軌道集，次數為填充網格容器所需的次數。
  • 軌道：第二個引數指定將被重複的軌道集。這基本上由一個或多個值組成，每個值代表該軌道的大小。每個大小都使用 <track-size> 值或 <fixed-size> 值來指定。你還可以在每個軌道前後指定一個或多個網格線名稱，方法是在軌道大小前後提供 <line-names> 值。

如果你使用 auto-fill 或 auto-fit 來設定重複次數，則只能使用 <fixed-size> 型別指定軌道大小，而不能使用 <track-size> 型別。這就得到了 repeat() 的三種主要語法形式

  • <track-repeat>，使用
    • 一個整數來設定重複次數
    • 使用 <track-size> 值設定軌道大小。
  • <auto-repeat>，使用
  • <fixed-repeat>，使用
    • 一個整數來設定重複次數
    • 使用 <fixed-size> 值設定軌道大小。

然後，如果一個屬性宣告使用了 <auto-repeat>，那麼對於任何其他的 repeat() 呼叫，它只允許使用 <fixed-repeat>。例如，下面的寫法是無效的，因為它將 <auto-repeat> 形式與 <track-repeat> 形式結合了起來

css
.wrapper {
  grid-template-columns:
    repeat(auto-fill, 10px)
    repeat(2, minmax(min-content, max-content));
}

還有第四種形式，<name-repeat>，用於向子網格新增網格線名稱。它只與 subgrid 關鍵字一起使用，並且只指定網格線名稱，不指定軌道大小。

值

<fixed-size>

以下形式之一

<flex>

一個非負的、單位為 fr 的尺寸，指定軌道的彈性係數。每個 <flex> 大小的軌道將按其彈性係數的比例分享剩餘空間。

<length>

一個正整數長度。

<line-names>

零個或多個 <custom-ident> 值，以空格分隔並用方括號括起來，如：[first header-start]。

<percentage>

一個非負百分比，對於列網格軌道，是相對於網格容器的內聯尺寸；對於行網格軌道，是相對於網格容器的塊級尺寸。如果網格容器的尺寸取決於其軌道的尺寸，那麼 <percentage> 必須被視為 auto。使用者代理可以調整軌道對網格容器尺寸的固有尺寸貢獻，並透過能滿足該百分比的最小量來增加軌道的最終尺寸。

<track-size>

以下形式之一

auto

作為最大值，與 max-content 相同。作為最小值，它代表佔據該網格軌道的網格項的最大最小尺寸（由 min-width/min-height 指定）。

auto-fill

如果網格容器在相關軸上有一個確定的或最大的尺寸，那麼重複的次數是不會導致網格溢位其網格容器的可能的最大正整數。如果確定，則將每個軌道視為其最大軌道尺寸函式（用於定義 grid-template-rows 或 grid-template-columns 的每個獨立值）。否則，將其視為最小軌道尺寸函式，並考慮網格間距。如果任何重複次數都會導致溢位，則重複次數為 1。否則，如果網格容器在相關軸上有一個確定的最小尺寸，則重複次數是滿足該最小要求的可能的最小正整數。否則，指定的軌道列表只重複一次。

auto-fit

行為與 auto-fill 相同，只是在放置網格項後，任何空的重複軌道都會被摺疊。空軌道是指沒有置入或跨越其上的在流網格項的軌道。（如果所有軌道都為空，這可能導致所有軌道都被摺疊。）

一個被摺疊的軌道被視為具有單一的固定軌道尺寸函式 0px，其兩側的間距也會被摺疊。

為了找到自動重複軌道的數量，使用者代理會將軌道尺寸向下取整為一個使用者代理指定的值（例如，1px），以避免除以零。

max-content

表示佔據該網格軌道的網格項的最大內容貢獻值。

min-content

表示佔據該網格軌道的網格項的最小內容貢獻值。

正式語法

<track-repeat> = 
  repeat( [ <integer [1,∞]> ] , [ <line-names>? <track-size> ]+ <line-names>? )  

<auto-repeat> = 
  repeat( [ auto-fill | auto-fit ] , [ <line-names>? <fixed-size> ]+ <line-names>? )  

<fixed-repeat> = 
  repeat( [ <integer [1,∞]> ] , [ <line-names>? <fixed-size> ]+ <line-names>? )  

<name-repeat> = 
  repeat( [ <integer [1,∞]> | auto-fill ] , <line-names>+ )  

<line-names> = 
  '[' <custom-ident>* ']'  

<track-size> = 
  <track-breadth>                                   |
  minmax( <inflexible-breadth> , <track-breadth> )  |
  fit-content( <length-percentage [0,∞]> )          

<fixed-size> = 
  <fixed-breadth>                                   |
  minmax( <fixed-breadth> , <track-breadth> )       |
  minmax( <inflexible-breadth> , <fixed-breadth> )  

<track-breadth> = 
  <length-percentage [0,∞]>  |
  <flex [0,∞]>               |
  min-content                |
  max-content                |
  auto                       

<inflexible-breadth> = 
  <length-percentage [0,∞]>  |
  min-content                |
  max-content                |
  auto                       

<length-percentage> = 
  <length>      |
  <percentage>  

<fixed-breadth> = 
  <length-percentage [0,∞]>

示例

使用 repeat() 指定網格列

HTML

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>

CSS

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;
}

結果

規範

規範
CSS 網格佈局模組 Level 2
# 重複表示法

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

此頁面最後修改於 ，由 MDN 貢獻者們修改。

在 GitHub 上檢視此頁面 • 報告此內容的問題
© . Content available under a Creative Commons license.