Estamos caminhando para mais um post da série: Aprenda grid. E nesse post vamos conhecer a função repeat para criar as nossas grids.
Usamos repeat quando vamos construir layouts que precisam de várias colunas e não queremos ter o trabalho de digitar todos os valores (beleza divina kkkkk)
Como funciona?
Essa função é bem simples. Como o nome já diz, ela repete o trecho de valores durantes quantas vezes informarmos.
Ex.:
repeat(6, 100px)
Nesse trecho estamos repetindo 6 vezes o valor 100px.Como ela foi criada para repetir os valores, podemos concordar que ela deve ser usada em grid-template-columns caso queira definir as larguras e em grid-template-rows caso queira definir o tamanho das linhas. Correto?
Aplicação prática:
Vou mostrar um exemplo de como podemos implementar no nosso projeto.
.grid{
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(4, 2fr);
grid-template-rows: 200px 100px 150px;
}
Se você não faz a mínima ideia do que esse código está fazendo, recomendo que você veja os posts anteriores da série.
Veja que estou repetindo 4 vezes o valor 2fr (como usar a unidade fr). Portanto, podemos concluir que essa grid terá 4 colunas de 2fr de largura.
IMPORTANTE: Se o projeto necessitar, também podemos usar valores em px ao invés de fr.
Ex. de caso 1:
Você está em um projeto em que precisa criar 8 colunas variando entre 100 e 200pxs, sendo assim, a primeira de 100px; a segunda de 200px; a terceira de 100px; etc.....
Perceba que os valores sempre se repetem sempre na mesma ordem. Felizmente, a função repeat recebe mais de um valor para a largura.
Como resolveria?
.grid{
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(4, 100px 200px);
grid-template-rows: 300px;
}
Ex. de caso 2:
Agora você tem que colocar 7 colunas da tela do site. Mas a primeira tem um valor fixo de 100px e o restante ocupa 1fr do que sobrou de espaco na tela. E para completar, você tem que fazer as 4 linhas que irão se formar ter o tamanho exato de 200px.
Solução:
.grid{
display: grid;
grid-gap: 10px;
grid-template-columns: 100px repeat(6, 1fr);
grid-template-rows: repeat(4, 200px);
}
É por essas e por outras que eu defendo que grid é bem fácil e rápido, tanto para aprender como para implementar.
Até a próxima ; )