A função minmax() permite que definamos o valor mínimo e máximo da(s) coluna(s) da grid.
Se você chegou de paraquedas nesse post e não sabe do que se trata grid, recomendo que leia a parte 1.
OBS: Os códigos de todos os posts dessa série estão no Github.
Agora, vamos por as mãos à obra.
Como funciona:
Podemos declarar minmax() em grid-template-columns e grid-template-rows. É importante lembrar que essa função recebe sempre 2 parâmetros: o primeiro tomado como o mínimo e o segundo como o valor máximo do tamanho daquela coluna.
Veja o exemplo:
.grid{
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(4, 2fr);
grid-template-rows: minmax(300px, auto);
}
Vamos entender: Tenho 4 colunas com 2fr cada (aprenda a unidade fr) e 1 linha com tamanho mínimo de 300px, e valor automático para o valor máximo. Ou seja, o tamanho máximo da linha será acompanhado pelo conteúdo que possui dentro dela.
Agora se ao invés de auto fosse 500px, o tamanho da linha obedeceria a regra de entre 300 a 500px.
Você pode fazer isso para todas as linhas que seu projeto possuir.
IMPORTANTE: Também podemos mesclar a função repeat com minmax().
Ex.:
.grid{
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(4, 2fr);
grid-template-rows: repeat(2, minmax(300px, auto));
}
Nesse trecho de código possuo 2 linhas que deverão se comportar do mesmo modo. Ambas devem ter ao menos 300px de comprimento, porém não quero definir o máximo. O comprimento máximo será definido pelo seu conteúdo.
Qual a vantagem de usar minmax()?
Imagine que você possui 3 colunas. A primeira contém uma imagem e as outras 2 possuem textos. Mesmo você usando a unidade fr, pode acontecer de no mobile a foto ficar muito pequena para a tela, já que você vai estar dividindo a tela em frações.
Com o minmax(), você pode definir uma valor mínimo para que essa foto não fique tão pequena. Possibilitando assim, uma melhor visualização do conteúdo da página.
Nesses primeiros posts, estou mostrando somente o básico para entender bem as propiedades das grids. No futuro, irei mostrar como criar o esqueleto/layout inteiro do seu site utilizando somente grid.
Então, fique por aqui. No instagram @ohmycodebr estou sempre postando cada vez que lanço algum post. Fica de olho ; )
Ultimamente, estou ouvindo uma playlist bem massa do Nando Reis.