29/1/2021 Mateus Varela

Display Grid

Fala rapaziadaaaa, bora tentar entender como funciona o queridíssimo Display grid, chega mais.

Basicamente Display grid é um dos sistemas de layout mais poderosos e usados atualmente, com ele, trabalhamos com um sistema bidimensional e isso significa que é possível desenvolver layouts em colunas e linhas, isso se torna tão prático que grandes projetos acabam usando para economizar tempo e deixar o código mais organizado.

📝 Primeiros passos

Beleza, agora vamos ver como começar a usar no nosso código e as principais funções.

Nos exemplos vou levar em consideração um projeto um pouco mais simples, com uma pasta HTML e uma pasta CSS para facilitar um pouco o entendimento.😜

💡 O começo

A primeira coisa que precisamos fazer, é chamar o grid na nossa pasta .css, assim que ele for chamado podemos começar a configurar o layout.

body {
  display: grid;
}

Certo, normalmente essa função é chamada dentro de uma tag HTML ou classe que engloba outros elementos, então todos vão ter o efeito do grid, aqui usamos um body.

Agora que já chamamos o grid, vamos começar a organizar o nosso layout, para isso podemos chamar as seguintes funções:

body {
  display: grid;
  grid-template-columns: 80px 1fr 60px;
  grid-template-rows: 60px 1fr 60px;
}

Beleza, apareceram as funções responsáveis por configurar quantidade e tamanho das colunas e linhas.

• grid-template-columns: Vai cuidar das colunas, configurando para gerar a quantidade de colunas especificada, no exemplo foram criadas três colunas com a primeira coluna tendo 80px, a segunda coluna usa uma unidade fr (fragmento) que vai ocupar o espaço inteiro que está disponível, ou seja, vai ocupar o que está sobrando entre as colunas, a terceira coluna vai ocupar os 60px no canto direito da tela. Assim a coluna que tem a unidade fr vai ficar na parte do meio da tela.

• grid-template-rows: E essa é a função usada para configurar a quantidade de linhas e os seus tamanhos, no exemplo foram criadas três linhas, assim como na função anterior, podemos usar a unidade de fragmento que vai ter o mesmo comportamento nas linhas.

😯 O grande diferencial

Pode-se dizer que uma das propriedades mais importantes do grid, é a grid-template-areas pois é com ela que definimos onde cada elemento vai ficar na tela, e o que era um desafio a alguns anos no passado, acaba sendo surpreendentemente fácil.

body {
  display: grid;
  grid-template-columns: 80px 1fr 60px;
  grid-template-rows: 60px 1fr 60px;
  grid-template-areas:
    'cabecalho cabecalho cabecalho'
    '  menu     conteudo  conteudo'
    ' rodape     rodape    rodape';
}

Nessa parte, buscamos os elementos que queremos que apareçam na nossa tela e organizamos da forma como queremos, lembrando que configuramos nosso grid para ter três colunas e três linhas então temos que respeitar isso. Como temos três colunas, quando eu quero que algo ocupe a tela inteira, como é o caso do cabecalho, temos que chamar ele nas três colunas e então vai ocupar toda a primeira linha. Caso eu quisesse que um elemento ocupasse mais de uma linha, a única alteração necessária seria colocar ele na linha de baixo, e exatamente em baixo do elemento que quero que fique.

Dessa forma podemos desenvolver layouts bastante complexos de forma bastante rápida e simples, basta ter em mente o que deseja fazer.

🤔 E agora? já posicionamos os elementos e configuramos as colunas e linhas, qual é o próximo passo?

O próximo passo é chamar as tags HTML ou classes e relacionar com as respectivas áreas que elas vão ocupar, e obviamente existe uma função para isso também e surpreendentemente também é bastante simples…

body {
  display: grid;
  grid-template-columns: 80px 1fr 60px;
  grid-template-rows: 60px 1fr 60px;
  grid-template-areas:
    'cabecalho cabecalho cabecalho'
    '  menu     conteudo  conteudo'
    ' rodape     rodape    rodape';
}

header {
  grid-area: cabecalho;
  background-color: grey;
}

nav {
  grid-area: menu;
  background-color: white;
}

main {
  grid-area: conteudo;
  background-color: silver;
}

footer {
  grid-area: rodape;
  background-color: grey;
}

A função usada aqui é grid-area, ela é a responsável por dizer qual é o endereço de cada elemento chamado, ou seja, o meu elemento HTML vai ver o que está dentro dela e procurar na função grid-template-areas o resultado igual, assim que achar, ela vai ser gerada lá mesmo, por isso é importante colocar a mesma coisa nas duas funções.

📐 Propriedades de alinhamento

Outra coisa bastante importante são as propriedades de alinhamento, com elas temos ainda mais controle sobre os elementos depois que foram gerados, e isso é bastante importante para deixar o layout exatamente da forma como foi pensado, sem essas propriedades acabaria que os elementos seriam gerados e não poderíamos alterar eles dentro do grid ou até mesmo alterar o grid.

Vamos dar uma olhada nessas propriedades então!

/**
* Justify será para o eixo horizontal do grid.
  Align será para o eixo vertical do grid.
*/
justify-content: center;
align-content: center;

• Justify-content e align-content: Aqui conseguimos mover o grid inteiro, então imaginando que o grid seja um bloco, vamos mover ele inteiro para onde for desejado.

justify-items: start;
align-items: start;

• Justify-items e align-items: Aqui já é possível mover o conteúdo dentro do grid, então vamos voltar a imaginar um bloco, mas agora com vários itens dentro, vamos mover todos os itens que esão dentro para onde for desejado, deixando o grid inteiro parado.

justify-self: end;
align-self: end;

• Justify-self e align-self: E aqui vamos posicionar apenas o item que queremos, então mais uma vez vamos imaginar que o grid seja um bloco com vários itens dentro, agora vamos mover apenas o item selecionado, deixando os outros itens parados onde estavam.

📖 Conclusão

E aqui finalizo a minha explicação bem resumida sobre uma ferramenta muito potente que se usada da maneira correta, pode deixar seu código muito mais eficiente e fácil de entender, então pode ter certeza que vale a pena começar a praticar, já que quem mais vai ganhar nessa história é você.

🔗 Referências

Vocês podem ver um pouco mais sobre esse assunto em:

• https://css-tricks.com/snippets/css/complete-guide-grid/
• https://origamid.com/projetos/css-grid-layout-guia-completo/

🎯 Código

Caso queiram dar uma olhada em como ficou o exemplo:

• https://codepen.io/Mateus_Varela/pen/VwmZGWB

“Seja ‘responsivo’.”

Mateus Varela.