Função repeat() CSS

Definição e uso

CSS repeat() A função é usada para repetir um conjunto de colunas ou linhas no grid.

Se seu grid tiver muitas linhas ou colunas, essa função é muito útil. Com essa função, você pode criar um "padrão de repetição" para usar.

Essa função é usada com grid-template-columns Atributos e grid-template-rows Atributos juntos.

Exemplo

Exemplo 1

Usar repeat() Repetir um conjunto de colunas na grade：

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

Experimente você mesmo

Exemplo 2

Usar repeat() Repetir um conjunto de colunas na grade：

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

Experimente você mesmo

Sintaxe CSS

repeat(repeat-count, tracks)
Valor Descrição
repeat-counts

Obrigatório. Especifica o número de repetições das colunas ou linhas.

Pode ser um inteiro maior ou igual a 1, ou as palavras-chave auto-fill ou auto-fit (elas repetirão colunas/linhas conforme necessário para preencher o contêiner da grade).
tracks

Obrigatório. Especifica as colunas ou conjuntos de linhas repetidos. Pode usar os seguintes valores：

  • Valores de comprimento (px, em, %, fr, ch)
  • min-content
  • max-content
  • auto
  • minmax()
  • fit-content()
  • Linhas nomeadas

Detalhes técnicos

Versão： Módulo de Layout de Grade CSS Grid Level 2

Suporte do navegador

Os números na tabela indicam a versão do navegador que suportou completamente essa função pela primeira vez.

Chrome Edge Firefox Safari Opera
57 16 76 10.1 44

Páginas relacionadas

Referência:Atributo CSS grid-template-columns

Referência:Atributo CSS grid-template-rows