CSS repeat() 関数

定義と使用法

CSS repeat() 関数は、グリッド内で一組の列や行を繰り返すために使用されます。

あなたのグリッドに多くの行や列がある場合、この関数は非常に役立ちます。この関数を使って、使用するための「リピートパターン」を作成できます。

この関数は、 grid-template-columns 属性と grid-template-rows 属性を一緒に使用します。

インスタンス

例1

を使用して repeat() グリッド内で一組の列を繰り返します：

#container {
  display: grid;
  grid-template-columns: repeat(2, 60px 1fr);
  grid-gap: 7px;
  background-color: green;
  padding: 7px;
}

実際に試してみてください

例2

を使用して repeat() グリッド内で一組の列を繰り返します：

#container {
  display: grid;
  grid-template-columns: repeat(4, auto);
  grid-gap: 7px;
  background-color: green;
  padding: 7px;
}

実際に試してみてください

CSS文法

repeat(repeat-count, tracks)
値 説明
repeat-counts

必須。列や行が繰り返される回数を指定します。

1以上の整数またはキーワード auto-fill または auto-fit（必要に応じて列/行を繰り返し、グリッドコンテナを満たします）
tracks

必須。重複する列や行集合を指定します。以下の値を使用できます：

  • 長さ値（px、em、%、fr、ch）
  • min-content
  • max-content
  • auto
  • minmax()
  • fit-content()
  • 命名線

技術的詳細

バージョン： CSS Grid Layout Module Level 2

ブラウザのサポート

テーブルの数字は、その機能を完全にサポートする最初のブラウザのバージョンを示しています。

Chrome Edge Firefox Safari Opera
57 16 76 10.1 44

相关页面

参考：CSS grid-template-columns 属性

参考：CSS grid-template-rows 属性