CSS Grid um novo jeito de fazer Grid Layout Parte 3

CSS Grid um novo jeito de fazer Grid Layout Parte 3

01/09/2018 0 Por Alisson Suassuna

E aí galera, vamos a mais um artigo semanal, neste iremos abordar vários outros conceitos para fazer um Grid Layout, essa é a última parte da série sobre CSS Grid, caso você esteja caindo direto neste artigo, saiba que temos mais dois, e esse é a continuação dos demais já publicado no blog, então veremos alguns conceitos que provavelmente já foram explicados nos artigos anteriores. Nesse terceiro artigo, vamos estudar uma forma de organizar o nosso CSS Layout de uma forma mais profissional, que será de fato a maneira que devemos utilizar esse recurso, mas chega de conversa, vamos ao nosso código base para realizar os exemplos teóricos e práticos sobre CSS Grid.

Nota: clique aqui para acessar os demais artigos da série CSS Grid parte 1, CSS Grid parte 2

Código Base Grid Layout

CSS LayoutOrganizando o Grid Layout com CSS Grid

Depois que estruturamos as nossas informações semanticamente com o HTML5, faremos a estilização da página, e para organizar nosso layout vamos aplicar o CSS Grid, com nomes para facilitar nossa vida. A gente viu no artigo parte 2 que é perfeitamente possível e recomendado usar “Alias” para nossos elementos Grids. Então vamos aplicar nomes a cada elemento da nossa página.

Observe que para cada elemento criado em nosso documento HTML, aplicamos um nome usando a propriedade grid-area que foi amplamente explicada na parte 2 da série. Agora precisamos de fato comunicar ao browser que iremos trabalhar com CSS Grid e para isso precisamos escrever o seguinte código.

Grid Layout

Grid Layout

Note que quando definimos o display, nosso layout ficou desorganizado, poque ainda não configuramos como os grids-areas terão que se comportar em nossa página, então vamos fazer essas configurações.

Vamos explicar cada propriedade aplicada, para que tenhamos um total entendimento do poder do CSS Grid, aplicamos a propriedade min-height: 100vh para o  elemento ocupar a altura inteira do browser, definimos o layout de colunas e linhas com a propriedade grid-template-columns: 300px 1fr; ou seja a primeira coluna irá ter 300px e as demais serão ocupadas pelo espaço restante, depois aplicamos o grid-template-rows: 100px 1fr 100px; aqui estamos dizendo que a primeira linha terá 100px, e as demais a sumiram o espaço inteiro e 100px para linha de baixo que é  o nosso rodapé.

Todas essas propriedades foram explicadas nos artigos anteriores, a grande novidade para a gente, é o grid-template-areas é a partir dela que vamos decidir como organizar nosso layout, usando os nomes de cada elemento que atribuímos usando a propriedade grid-area, nosso layout tem seis slots de espaços  (Usando o firefox você consegue ver esses “slots”, falamos sobre isso nos artigos anteriores), onde temos duas colunas e três linhas e vamos preencher elas agora usando a propriedade;

grid-template-areas:

‘cabecalho cabecalho’  Estamos definindo que o cabeçalho irá ocupa a primeira linha que tem 300px e o restante da primeira linha no caso 1fr
‘navegacao conteudo’ A primeira linha vai ser ocupado pela navegação e a segunda o conteudo, como o conteudo tem 1fr ele irá ter um maior espaço na tela
‘rodape rodape’ O elemento rodape, irá ocupado a linha inteira

Feito essas configurações podemos facilmente manipular os elementos em nossa página, trocando apenas as posições no grid-template-areas. Veja o resultado no browser.

Grid Layout

Grid Layout

Cuidado

Caso você esqueça de preencher a propriedade grid-template-areas, o resultado será completamente diferente, veja o exemplo:

Grid Layout

Grid Layout

Conclusões sobre CSS Grid

Podemos observar uma grande evolução quando comparamos as soluções usadas anteriores ao CSS Grid, usando esse recurso você terá uma ampla cama de possibilidade e variações ao desenhar seu layout no browser, sei que a maioria usa N frameworkds para realizar essas tarefas, mas compensa analisar os cenários de cada projeto e ver o custo beneficio, vale realmente apena usar um framework CSS para fazer um grid? Bom essa pergunta só você terá a resposta pois vai depender muito do projeto que está sendo desenvolvido, então pensar bem antes de partir para uma solução aparentemente mais “fácil” seja um bom começo. Quero deixa essa reflexão para todos os colegas fron-end.

Bom, terminamos mais essa série de artigos no blog, muito obrigado por cada um que tirou um tempinho para vir ler o post, me esforcei bastante para passar o conteúdo de um jeito simples e objetivo, no mais aperta o botão gostei, compartilhe com seus colegas e deixa um comentário, abraço.

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

Livro muito bom gente, recomendo também