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:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
Vamos simplificar a escrita usando repeat:
#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:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr 2fr;
}
Vamos simplificar a escrita usando repeat:
#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:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr 2fr 2fr 2fr;
}
Vamos simplificar a escrita usando repeat:
#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:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr 3fr 2fr 2fr 2fr;
}
Vamos simplificar a escrita usando repeat:
#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:
#parent {
display: grid;
grid-template-columns: 200px 200px 200px;
}
Vamos simplificar a escrita usando repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 200px);
}
Tarefas práticas
Crie 4 colunas do mesmo
tamanho usando repeat.
Crie 4 colunas com tamanho de 100px,
e mais 3 colunas com tamanho de 2fr.
Crie 2 colunas com tamanho de 100px,
mais 3 colunas com tamanho de 200px,
depois uma coluna com tamanho de 1fr,
e depois 2 colunas
com tamanho de 10%.
