Função repeat em CSS Grid

Se você tiver várias colunas com os mesmos tamanhos definidos, pode simplificar a escrita usando a função repeat. O primeiro parâmetro dessa função especifica a quantidade de colunas, e o segundo - a largura delas. Vejamos com exemplos como isso funciona.

Exemplo

Suponha que temos três colunas do mesmo tamanho:

css#parent {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

Vamos simplificar a escrita usando repeat:

css#parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

Exemplo

Suponha que temos três colunas do mesmo tamanho, e uma quarta coluna de outro tamanho:

css#parent {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 2fr;
}

Vamos simplificar a escrita usando repeat:

css#parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr) 2fr;
}

Exemplo

Suponha que as primeiras três colunas são de um tamanho, e as próximas três colunas são de outro tamanho:

css#parent {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 2fr 2fr 2fr;
}

Vamos simplificar a escrita usando repeat:

css#parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr) repeat(3, 2fr);
}

Exemplo

Suponha que temos as primeiras três colunas de um tamanho, depois mais uma coluna, e depois mais três colunas de outro tamanho:

css#parent {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 3fr 2fr 2fr 2fr;
}

Vamos simplificar a escrita usando repeat:

css#parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr) 3fr repeat(3, 2fr);
}

Exemplo

A simplificação funciona para qualquer unidade de tamanho. Suponha, por exemplo, que temos três colunas em pixels:

css#parent {
  display: grid;
  grid-template-columns: 200px 200px 200px;
}

Vamos simplificar a escrita usando repeat:

css#parent {
  display: grid;
  grid-template-columns: repeat(3, 200px);
}

Tarefas práticas