Definindo o que vamos fazer

Antes de começarmos a colocar as mãos na massa, precisamos definir o que será feito. Como não cobriremos nada muito complexo, tomei a liberdade de criar um layout bem simples, porém, que atenda boa parte dos casos de uso.

Não vou criar conteúdos internos de cada um dos componentes porque o objetivo aqui é falarmos de Grid Layout. Em um outro momento falarei sobre como controlar os elementos internos utilizando Flexbox.

Por ora, vamos focar em construir essa pequena página utilizando somente Grid Layout. Sendo assim, vamos somente nos preocupar com o layout de forma geral.

Colocando a mão na massa

Antes de mais nada, precisamos definir um container para que seja possível determinar um comportamento de grid, então vamos criar uma div com um container.

Eu poderia definir o body com comportamento de Grid. Porém, existem casos onde apenas uma parte da sua página vai se comportar como Grid – por isso seguirei com o container definido em uma div.

Ok, agora temos uma div com uma classe container. Como pode ver na pen, já está definido o display: grid; na classe container.

Já temos o comportamento de Grid. Com isso, já podemos criar as outras marcações necessárias para que possamos posicioná-las.

Para facilitar o desenvolvimento

Uma dica: você pode utilizar o inspetor de Grid do Firefox para verificar se há algum grid e o comportamento dos elementos internos. Basta clicar na página com o botão direito do mouse.

Na aba inspector você encontrará sub abas. Clique na aba layout – haverá uma seção chamada Grid. Se houver algum container com grid, aparecerá ali. Basta clicar na opção de ativar o inspetor e pronto, tudo certo!

Bom, agora que já temos nosso container definido, podemos criar as marcações com os elementos necessários que irão compor nosso layout, A pen abaixo já mostra os elementos na página:

Agora temos as marcações necessárias para o nosso layout e as estilizações de cada um dos componentes, certo? Certo. Nosso próximo passo é posicionar os nossos elementos dentro do nosso grid de forma a atender o layout que foi proposto logo acima.

Para isso, temos diversas formas para se fazer. Vou adotar aqui neste artigo algo chamado de Area Naming, onde cada um dos meus elementos recebe um determinado nome dentro da minha folha de estilos, e através desses nomes será possível informar para o grid onde cada um dos elementos vai ficar posicionado e quanto de espaço cada um destes elementos terá.

Mas antes, precisamos definir qual será o tamanho do nosso grid. Isso significa definir a quantidade de colunas e linhas. Bom, então vamos analisar novamente o layout proposto.

Analisando o layout, é possível concluir que o grid precisará de três colunas e três linhas. Ou seja, um Grid 3×3, totalizando 9 células (3 x 3 = 9).

Agora vai ficar mais fácil construir o Grid porque já sabemos o tamanho exato dele. Nessa pen bem bacana, eu mostro como:

Perceba que utilizamos duas propriedades novas: grid-template-columns e grid-template-rows. Com essas duas propriedades eu posso definir a quantidade de colunas e linhas que eu desejo de maneira bem simples – basta informar o tamanho de cada linha/coluna que eu desejo.

Por exemplo, para criar quatro linhas, basta definir o tamanho de cada uma delas: grid-template-rows: 1fr 1fr 1fr 1fr;

Lembra da medida FR que abordei anteriormente? Pois é! De maneira fácil e sem necessidade de cálculos, eu defino o tamanho da minha coluna e ele já calcula as margens e, caso exista, os meus grid-gap’s.

Além disso, temos uma função que trabalha em conjunto com essas propriedades – ela se chama repeat(). Com ela eu defino quantas colunas/linhas eu quero e informo o tamanho dessas colunas de maneira bem mais simples. Seguindo o exemplo anterior eu posso fazer da seguinte forma: grid-template-rows: repeat(4, 1fr);.

Mais simples, não? Economizo tempo e deixo o código um pouco mais limpo, mas lembrando que devemos utilizar essa propriedade somente quando soubermos quantas colunas existem e se os tamanhos se repetem.

Continuando o desenvolvimento do nosso layout, vamos nomear os nossos elementos para que seja possível posicioná-los dentro do grid. Para demonstrar isso, segue mais uma pen marota.

Para nomear os nossos elementos, é bastante simples. Basta usar a propriedade grid-area dentro do nosso elemento e dar o nome que desejamos. Por exemplo, caso queira nomear o elemento que corresponde à barra de menu, basta definir dentro da classe .menu a propriedade grid-area: menu;:

.menu { grid-area: menu; }

Talvez você ainda não tenha entendido como utilizar essas grid-areas, mas calma que vamos cobrir isso no próximo passo. E note que o nosso layout ficou bastante esquisito – isso é normal, pois quando eu dou um nome para cada um dos meus elementos através do grid-area, mas não defino onde eles vão ficar, eles se comportam de modo estacado.

Ou seja, acabam ficando agrupados e sempre ficam na ultima célula, Não se preocupe com o porquê disso agora. Falaremos desses comportamentos “estranhos” em algum outro momento. Por hora, vamos focar somente no que de fato importa: construir nosso layout.

Como mencionado acima, vamos para o nosso próximo passo. Posicionaremos nossos elementos no grid. Segue aquela pen moralizadora para exemplificar isso:

Vamos destrinchar isso pra deixar claro para todo mundo, então muita calma nessa hora!

Primeira coisa que eu fiz foi posicionar os nomes dos meus elementos ao centro pra facilitar e ficar mais fácil pra visualizar o conceito – nada complexo mesmo – apenas um text-align: center; no body e a questão foi resolvida.

Segundo, eu defini uma altura. Mas por que? Eu explico: quando eu defini que minhas colunas e linhas teriam uma medida definida em fração (1fr ou 4fr), o navegador vai pegar essa medida e vai fazer um determinado cálculo pra gente (lembra que eu comentei sobre os cálculos serem feitos de forma automática anteriormente?), pois bem, ele precisa ter uma base pra fazer o cálculo – especialmente no caso da altura do meu container.

Isso significa que ele precisa de uma altura definida pra distribuir os elementos conforme as definições que passamos através do grid-template-columns e grid-template-rows.

Nesse caso, ele vai pegar os meus 700px de altura e vai calcular sozinho quanto 1fr ou 4fr representam ali no container.

Dessa forma, eu deixo bem claro o poder que temos com a medida Fr. Sem dificuldade e sem quebrar muito a cabeça conseguimos definir um determinado tamanho para as colunas e linhas, e definindo uma altura ele já vai fazer todos os cálculos necessários, independentemente do fato de termos ou não grid-gap ou de mudarmos o tamanho da altura do container.

E a terceira coisa que foi feita foi posicionar os nossos elementos com o grid-template-areas dentro do nosso container.

Através de aspas simples eu vou informando onde cada elemento vai ficar, exatamente como mostrado na pen. Ou seja, se eu tiver três colunas definidas e quiser que minha barra de menu se estenda por todas as colunas, basta nomear cada célula com o nome da grid-area desejada. Por exemplo, definimos um grid-template-areas e com uma string definimos onde começa e onde termina a ocupação do nosso elemento. Por exemplo:

grid-template-areas: ‘menu menu menu’

Ele vai ocupar três colunas de três colunas disponíveis.

grid-template-areas: ‘menu menu lateral-direita’

O menu ocupa duas colunas, e lateral-direita ocupa uma coluna.

Simples, né?

Como você pôde ver na pen acima, nosso layout já está praticamente pronto. Ele já está funcionando da maneira que queremos e com os elementos posicionados sem muita dificuldade.

Concluindo

O próximo passo é criar o comportamento responsivo para esse nosso layout. Garanto que é bem fácil, bem simples e bem rápido, pelo menos se compararmos como fazíamos antes.

Mas essa parte vou deixar para uma terceiro artigo, até porque esse aqui já está ficando grande demais e já temos muita coisa pra absorver até aqui, então, no próximo a gente já cobre a parte responsiva, alguns outros pequenos pontos conceituais e fechamos essa pequena série, combinado?

Espero que esteja te ajudando a entender melhor o funcionamento do Grid. De maneira mais simplificada, como eu mencionei anteriormente, a ideia aqui é entender o poder do grid e abrir essa primeira porta para vocês explorarem essa propriedade tão legal que é o Grid Layout.

Te espero na próxima e qualquer duvida, é só chamar!

Valeu!