repeat()

repeat()CSS の関数で、トラックリスト内での繰り返し部分を表し、列や行の繰り返しをよりコンパクトに書くことができます。

この関数は CSS グリッドのプロパティである grid-template-columnsgrid-template-rows の中で使うことができます。

/* <track-repeat> 値 */
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> 値 */
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> 値 */
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 単位の負ではない寸法。それぞれのフレックスサイズのトラックは、それらのフレックス要素に比例して残りのスペースを配分する。
max-content
グリッドトラックにあるグリッドアイテムの最も大きい max-content を表す。
min-content
グリッドトラックにあるグリッドアイテムの最も大きい min-content を表す。
auto
最大値としては、 max-content と同じです。最小値としては、グリッドトラックを占めるグリッドアイテムの最大最小サイズ (min-width/min-height で指定されたもの) を表します。
auto-fill
グリッドコンテナーが関連する軸に、定義されたまたは最大の幅を持っている場合、繰り返しの数は、グリッドコンテナーをオーバーフローさせない最大の正の数になる。各トラックは定義されているならば、最大トラック幅を調整する関数 (grid-template-rows または grid-template-columns を定義するために使用されるそれぞれ独立した値) として扱われる。それ以外の場合は、最小トラック幅を調整する関数として扱い、グリッドギャップを考慮に入れる。何回繰り返してもオーバーフローしてしまう場合は、繰り返しを 1 とする。そうでなければ、グリッドコンテナーが関連する軸に、定義された最小の寸法をもっている場合、繰り返しの数は最小の要件を満たす可能性がある最小の正の整数になる。その他の場合は、指定されたトラックリストは 1 回のみ繰り返す。
auto-fit

auto-fill と同様に動作しますが、グリッドアイテムを配置した後、空の繰り返しトラックが折りたたまれる点が異なります。空のトラックとは、フロー内のグリッドアイテムが配置されていない、またはそれをまたいで配置されているものがないトラックのことです。 (これは、すべてのトラックが空の場合、すべてのトラックが折りたたまれる結果になる可能性があります。)

折り畳まれたトラックは、 0px の固定トラックサイジング機能を1つ持っているものとして扱われ、その左右の溝も折り畳まれます。

自動反復トラックの数を見つけるために、ユーザーエージェントは、ゼロによる除算を避けるために、トラックの寸法をユーザーエージェントが指定した値 (例えば 1px) に切り下げます。

repeat() を使用したグリッド列の指

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

#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 Grid Layout
repeat() の定義
勧告候補 初回定義

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
repeat()Chrome 完全対応 57
完全対応 57
完全対応 38
無効
無効 From version 38: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Edge 完全対応 16Firefox 完全対応 76
完全対応 76
未対応 57 — 76
補足
補足 repeat(auto-fill, ...) and repeat(auto-fit, ...) only support one repeated column (see bug 1341507).
未対応 52 — 57
補足
補足 calc() doesn't work in repeat() (see bug 1350069).
未対応 40 — 59
無効
無効 From version 40 until version 59 (exclusive): this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 完全対応 44
完全対応 44
完全対応 28
無効
無効 From version 28: this feature is behind the Enable experimental Web Platform features preference.
Safari 完全対応 10.1WebView Android 完全対応 57Chrome Android 完全対応 57
完全対応 57
完全対応 38
無効
無効 From version 38: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Firefox Android 完全対応 52
完全対応 52
未対応 40 — 59
無効
無効 From version 40 until version 59 (exclusive): this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 完全対応 43
完全対応 43
完全対応 28
無効
無効 From version 28: this feature is behind the Enable experimental Web Platform features preference.
Safari iOS 完全対応 10.3Samsung Internet Android 完全対応 6.0

凡例

完全対応  
完全対応
未対応  
未対応
実装ノートを参照してください。
実装ノートを参照してください。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。

関連情報