Eu já mostrei mostrei como tornar as colunas da grid flexíveis com a unidade fr. Agora com as proprieddes auto-fill e auto-fit vamos colocar as colunas para serem não só responsivas, mas sim reagrupadas de acordo com o tamanho da tela.
É importante ressaltar que para essas técnicas, utilizaremos somente uma linha/row da grid. Pois, como essas propiedades redimensionam as colunas automaticamente, já serão criadas as linhas que forem necessárias "magicamente".
auto-fill
Traduzindo para o português, auto-fill significa "preencha automaticamente". Mas para entendermos de uma melhor forma, podemos partir para a prática.
Nos exemplos, vou utilizar conceitos já trabalhados antes. Se é a primeira vez que você vem nessa série, recomendo que veja os posts antigos.
Vamos utilizar um exemplo com 8 colunas (você mesmo faz). Só irei mostrar a parte de grid.
.grid{
display: grid;
grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
grid-auto-rows: 70px;
grid-gap: 10px;
}
Se o comando falasse, seria assim:
Linha 1: "Nessa div chamada grid, quero que ela se comporte na tela/display como uma grid";
Linha 2: "Preencha automaticamente TODO O ESPAÇO DO TEMPLATE DAS COLUNAS os valores entre 50px e 1fr ";
Linha 3: "As linhas da grid que não foram especificadas (todas) terão uma altura de 70px".
Linha 4: "Defina um espaçamento de 10px entre cada coluna e cada linha".
Veja que eu grafei algumas coisas da linha 2, que é exatamente onde está o auto-fill.
Essa é a característica do auto-fill: Ele preenche toda a tela com os valores (no caso, minmax). E logo após, ele coloca as nossas colunas. Isso faz com que apareça espaços invisíveis com 50px a 1fr.
Veja o resultado:
No espaço branco é como se tivesse várias divisões que não foram alocadas. Estão "esperando" mais colunas.
Mas olha o que acontece com a responsividade:
[GIF com auto fill]
A possibilidade de adaptação do conteúdo a tela ficou muito boa. Está reagrupando as colunas de acordo com a necessidade.
OBS: auto-fill é uma ferramenta poderosa, mas que pode ser um erro trabalhar com ela sem estudo de tamanhos e cálculos das telas. Veja que no começo do gif as colunas parecem "dar um salto" até começarem a ser reagrupadas. Isso ocorre por causa daqueles espaços invisíveis que eu mencionei. Portanto, se você for usar essa técnica calcule exatamente o tamanho da tela, divida por 8 (quantidade de colunas desse exemplo) e coloque esse valor como o valor mínimo.
auto-fit
Pessoalmente, esse é meu preferido. Sua tradução é "ajuste automaticamente".
O auto-fit é quase a mesma coisa que o seu irmão auto-fill. Ele também preenche todo o espaço do template das colunas. A diferença é que ele pega os espaços invisíveis e "destrói", ou seja, na prática ele pega os espaços não alocados e coloca uma largura de 0px pra eles.
Vamos ver um exemplo de código:
.grid{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
grid-auto-rows: 70px;
grid-gap: 10px;
}
Mesmo exemplo anterior, mas com o outro irmão. Como será que ficou?
Particularmente falando ficou de uma forma mais agradável de se ver.
E sua responsividade?
[GIF com auto fit]
Cada um dos dois irmãos tem sua utilidade.
O auto-fit é para aqueles projetos que você não se importa tanto com a largura da coluna, mas quer que ela fique responsiva e ocupe a tela toda.
Já o auto-fill exige mais do desenvolvedor em termos de cálculo. Você vai precisar calcular de forma precisa se não quiser ter os espaços não alocados. Porém, a grande vantagem é que as colunas sempre ficam mais ou menos naquele tamanho. Há projetos que exigem isso.
Independente da sua preferência, os dois são ótimos recursos para transformar as nossas grids em responsivas e flexíveis. Vale a pena aprender os dois.
O código completo está aqui.
Não esqueça de seguir no instagram se quiser ficar por dentro das novidades e bastidores.
Até a próxima parte ; )