Dando início ao nosso segundo post da série Aprenda grid layout, vamos aprender hoje a unidade fr.
Antes de mais nada, o código desse post está no github.
Para quem ainda não percebeu, o exemplo da nossa parte 1 possui um GIGANTESCO PROBLEMA: Não está responsivo! E eu defendo que a web tem que ser acessível (assunto para outro post) e visível. Por tanto, sempre devemos programar para o usuário final e não só para ficar tudo bonitinho na sua tela.
[Gif de exemplo sem unidade FR]
"Muito fácil Gabriell. podemos colocar medidas vh, vw, %". Calma. Felizmente, o nosso problema pode ser resolvido tão fácil quanto rápido. Existe uma solução especialmente para grid: a unidade fr.
DEFINIÇÃO:
"A unidade fr representa uma fração do espaço disponível no container do grid." - Mozilla
ONDE ELA É USADA?
Usamos fr em grid-template-columns e grid-template-rows.
Exemplo:
.grid{
display: grid;
grid-gap: 10px;
grid-template-columns: 2fr 1fr;
grid-template-rows: 200px 100px 150px;
}
Repare que estamos definindo 2 colunas. Mas que a nossa grid está sendo dividida em 3 PARTES IGUAIS. Sendo duas frações da grid com a primeira coluna e apenas 1 fração do espaço na segunda coluna.
Resultado:
OBS.: Quero que você se atente que pode combinar sim px com fr. Existem casos que precisamos fazer uma coluna ficar num tamanho fixo. Nesse caso você deve usar px com fr para as outras ficarem responsivas. Também deverá usar media-queries (posso fazer um post falando sobre isso, para quem não souber).
E só estamos começando! Ainda vai ter muitas outras partes :)
Até breve.