CSS Grid um novo jeito de fazer Layout Parte 1

CSS Grid um novo jeito de fazer Layout Parte 1

07/07/2018 0 Por Alisson Suassuna

Olá pessoal, vamos falar um pouco sobre CSS Grid, esse recurso maravilhoso implementado no CSS3, como já expliquei no post sobre Flexbox o CSS3 está sempre em desenvolvimento, caso não tenha lido corre lá. Nós desenvolvedores web, sabemos que novos recursos levam tempo até serem implementados pelos nossos queridos navegadores, daí surgiu a necessidade de monitorar o percentual de suporte fornecido pelos browsers para determinado recurso, o site caniuse.com faz esse grande trabalho para nós.

#Dica, sempre que você for usar um novo recurso, vale apena ver o percentual de suporte do mesmo, para que não haja maiores dores de cabeça no futuro.

CSS Grid

Essa imagem mostra o percentual do suporte pelos browaers ao CSS Grid.

No momento que estou escrevendo esse artigo o suporte global ao CSS Grid é de 87.73%, podemos ver também cada versão dos navegadores, infelizmente o IE (Internet Explore) tem uma pequena deficiência em relação ao suporte, mas o Edge está caminhando junto com os demais. Então vamos ao nosso código base para entendemos tudo sobre esse tal de CSS Grid.

Código Base – CSS Grid


Neste código base temos 12 tags do tipo <div> com a classe CSS “g1”, dentro da taq <style>, temos uma breve estilização para facilitar os exemplos que serão apresentados neste artigo.

CSS Grid

Imagem representativa do código base – navegador

Iniciando o uso do CSS Grid

A primeira coisa que devemos fazer é colocar a propriedade display: grid; no elemento onde queremos.

O CSS Grid trabalha com linhas e colunas, ou seja, ele é bidimensional onde temos duas direções, ao contrário do FlexBox que é unidimensional. No blog tem um artigo falando sobre o FlexBox caso tenha curiosidade acesse o link: CSS3 Flexox Posicionando elementos parte 1A primeira propriedade que vamos ver é a grid-template-columns;

Propriedade grid-template-columns

Nesta propriedade definimos qual vai ser a organização das colunas dentro do CSS Grid, o nosso código base tem apenas uma coluna, então vamos definir mais de uma, e para fazer isso escolhi fazer-lo na unidade de percentagem, poderia ser também em pixels. Para dividir esse layout em duas colunas o calculo será, 100% dividido por 2, isso da 50%, estamos dizendo para o Grid que queremos pega todo o espaço e dividi-lo em 50% para cada, formando assim duas colunas.

Essa imagem representa o código com duas colunas

Quando temos valores iguais que é o caso aqui, podemos utilizar a função CSS repeat().

Neste código estamos dizendo a função repeat() repetir 4 vezez os valores 8.33% que no total dará 12 colunas, é o mesmo que dividir 8.33% por 12 vezes. A partir disso você que vai decidir qual vai ser o modelo do seu layout.

Continuando

Aqui estamos definido que nosso layout terá três colunas com as seguintes configurações, a primeira terá 200px um valor absoluto, ou seja, fixo, a segundo terá 20% do espaço e a terceira 1fr (1 fragmento, ou seja, irá pegar o resto que sobrou das colunas anteriores, no caso 200 px – 20%).

Aqui dividimos em três colunas e uma é a unidade fr fragmento do css

Nota: esses 20% será variável a medida da tela

Podemos trabalha só com essa nova unidade caso queiramos veja o exemplo a seguir.

Propriedade grid-template-rows

Nesta propriedade trabalhamos no âmbito das linhas, o CSS Grid nos permiti fazer alterações nelas também.


Aqui mostra o resultado no navegador depois de configurar as linhas

Agora estamos configurando a primeira linha para ter 250px, segunda 200px e a terceira terá 1fr, ou seja, o resto que sobra e a quarta o browser fará o calculo para ajustar conforme a disposição dos elementos da tela.


CSS Grid

demostração de como fica o layout com a linha no modo automático

Neste outro exemplo a primeira coluna terá 100px e as outras o navegador irá distribuir os espaços de forma igualitária.

Manipulando elemento especifico com CSS Grid

Vamos agora fazer alterações em um elemento especificamente. Para esses exemplos vamos utilizar o navegador Firefox, pois ele tem vários recursos extras para o módulo Grid CSS.

Foto do Firefox

Nesses exemplos estou usando o Firefox Quantum, na versão 60.0.2 (64Bits). Veja que quando abrimos o inspecionar elementos (Tecla de atalho F12) temos a aba Layout, clicando nela tem as opções de marca. Temos a opção body que mostra como os elementos estão na tela, podemos marca também a opção Display line numbers onde irá lhe mostra os números de cada linha no Grid. O firefox saiu muito na frente quando se trata de CSS Grid.

Vamos ao código

Neste código estamos dizendo a <div>, que tem a classe “g5” que ela irá inicia sua posição na coluna 2  até a coluna 4.

A imagem mostra a tela com o resultado do elemento já configurado.

Outra maneira de se obter o mesmo resultado é fazendo o uso do span.

Aqui ele da um span de duas linhas.

Trabalhando com linhas – Elementos específico


CSS Grid

Resultado depois da configuração da linha

Aqui estamos dizendo para a linha iniciar na posição 3 e ir até a 5, e aqui também podemos usar o span como usamos para as colunas anteriormente. Como podemos ver o grid só se alterar visualmente, no inspercionar as linhas e colunas continuam lá, isso facilita a nossa vida na hora de fazer um bom trabalho.

Cuidados que devemos ter com o CSS Grid

Nem tudo é essas mil maravilhas e não é diferente com esse recurso, há algumas sobreposições nos elementos que devemos ficar atentos, vamos provocar essa sobreposição.


CSS Grid

Sobreposição provocada no código, essa imagem mostra como ficou o browser

Note aqui que neste caso o elemento 10 ficou debaixo do elemento 11. Podemos resolver esse “problema” com o z-index essa propriedade do CSS diz a “profundidade” do elemento.

Avisos Importantes

Esse artigo haverá três partes, essa é a primeira.

Pessoal se gostou desse artigo aperta no botão curtir, compartilha para seus colegas isso ajuda bastante na divulgação do blog. Deixa seu comentário com elogios, criticas, sugestões de temas que vocês queiram ver aqui.

Recomendação de Estudo

A recomendação de hoje é esse curso de CSS3, onde aprenderemos os seguintes tópicos

  1. Trabalhar com técnicas CSS usadas por profissionais do mundo todo
  2. Escrever e estruturar melhor o CSS, dando ensejo a códigos mais profissionais

  3. Usar uma arquitetura CSS robusta, validada por experts internacionais

  4. Conhecer dicas, técnicas e ferramentas CSS para dar um passo adiante na carreira