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)

技術細節

瀏覽器支持

表格中的數字表示首個完全支持該函數的瀏覽器版本。

相關頁面

參考：CSS grid-template-columns 屬性

參考：CSS grid-template-rows 屬性