CSS Grid de um jeito fácil — Parte 1
Tá, ok, tem muitos artigos falando de Grid por aí, até melhores e mais completos do que este, mas meu objetivo aqui não é ser o mais completo, o que eu quero, nessa pequena série, é que você simplesmente entenda o que é Grid Layout, da maneira mais didática possível.
Introdução
Tempos atrás fiz uma palestra sobre CSS Grid Layout no Meetup do Front End SP onde eu pude dar um overview sobre como podemos otimizar a criação de layouts com essa magnifica tecnologia.
Vou mostrar pra vocês um pouco da história das implementações de tecnologias para criação de layouts nas CSS, um overview sobre as terminologias e vou mostrar a utilização através de um exemplo básico.
Nada complexo, mas de uma maneira muito didática.
Vamos lá.
First things first
Pra entender melhor a razão pela qual as CSS Grid existe, devemos entender primeiro alguns conceitos que envolvem não somente a construção de layouts na Web, mas também as CSS como um todo.
Lá no comecinho da década de 90, quando as CSS surgiu pra estilizar as páginas na web, as coisas eram muito mais “fixas” e os tamanhos de tela eram bem mais previsíveis.
Inicialmente, segundo Dr. Bert Bos, que é cocriador das CSS junto com Håkon Wium Lie, as CSS surgiram como algo bem simples, apenas para estilizar páginas que se apresentavam no navegador. Mas depois de um certo tempo, eles perceberam o potencial que isso tinha e se perguntaram: “Certo, agora que temos um sistema para estilizar páginas, o que mais podemos fazer?”.
Desde então, esse tem sido o objetivo daqueles que mantém as CSS evoluindo. Lá trás, revistas e jornais serviram de inspiração para Web, mas para aqueles que mantinham os navegadores, criar um sistema de layout era algo considerado complexo demais. Chega a ser estranho isso, não?
Em 2005, Dave Raggett que é do time da W3C escreveu “Advanced Layout Model”. Embora tenha havido um certo alvoroço da comunidade, essa proposta nunca chegou aos navegadores.
Phill Cupp que trabalhava na Microsoft e estava em um projeto que envolvia a criação do Windows 8, estava no time que tinha uma proposta de criação de apps com o uso de tecnologias Web. Ele percebeu logo que a web precisava muito de melhores formas de criar layouts complexos.
Ele era um grande fã do Silverlight (plugin da Microsoft para navegadores que suportava desenvolvimento de layouts complexos) e acabou se concentrando em um sistema de layout melhor pra web. Ele e alguns outros membros do seu time focaram todos os seus esforços nessa missão, um sistema mais confiável pra layouts da mesma forma que havia no Silverlight. O Windows tinha que suportar uma série de tamanhos de tela, resize de janela, resoluções de tela, entre outras coisas. Dessa forma a Microsoft precisava desesperadamente de um sistema realmente confiável se quisesse usar tecnologias web para criação de apps nativas.
E agora vem a melhor parte, depois de trabalhar com vários times internos da Microsoft, pensando em uma proposta de especificação realmente robusta e funcional, em 2012 eles vieram com a proposta de CSS Grid Layout, inicialmente implementado no IE 10 através do prefixo -ms.
Diferentemente das outras vezes, essa proposta não era somente algo teórico, era algo realmente prático que poderia ser, de fato, testado e analisado.
Bert Bos estava dando um workshop na França sobre Grid Layout, quando Rachel Andrew que é uma expert convidada da W3C estava presente. Esse encontro foi extremamente importante para o que temos disponível hoje em dia. Ela contribuiu muito não só para a evolução da especificação, mas como foi uma das responsáveis por trazer para a web essa nova forma de se criar layouts.
Depois de alguns anos, muitas conversas, refinamentos e muita coisa corrigida, o CSS Grid Layout finalmente chegou aos navegadores em Março do ano passado.
Depois de um ano de suporte dos principais navegadores, utilizar Grid Layout não só facilitou a nossa forma de criar layouts mais complexos, mas como também se tornou ainda mais seguro.
Considero importante conhecermos um pouco da história por trás dessa especificação, pois ela, de fato, mudou radicalmente a nossa forma de criar utilizar as CSS para criação de layouts desde que as CSS foi criado há mais ou menos 2 décadas atrás.
Ok, mas e o suporte a navegadores antigos?
Bom, muita gente me fala que ainda não é possível utilizar o Grid Layout por ter que dar suporte a navegadores antigos.
Bom, e se eu te dissesse que é completamente possível utilizar CSS Grid Layout E AINDA dar suporte a navegadores antigos? Pois é, é completamente possível. A resposta? Simples, Flexbox… Como o próprio nome já diz, é uma especificação extremamente flexível. Ela pode te ajudar a dar suporte a navegadores antigos e ainda ser utilizada como complemento ao Grid Layout.
O que isso significa? Vou falar disso mais pra frente, mas adiantando, Grid Layout é pra ser utilizado pra controle bidimensional do Layout ou seja, sua aplicação como um todo e o Flexbox pra controle unidirecional, isto é, pode ser utilizado pra controlar componentes internos da sua página.
Um exemplo fácil seria uma barra de navegação, a barra em si poderia ser controlada pelo Grid Layout, enquanto que os itens internos (links do menu, logo etc) podem ser controlados via Flexbox.
Então, é possível utilizar Flexbox como um complemento muito poderoso e útil ao Grid Layout e também para nos ajudar a dar suporte a navegadores mais antigos.
Não vou me aprofundar nisso agora, mas criarei um material especificamente direcionado pra esse fim, por hora, isso é suficiente, acredite em mim! :)
Esse link aqui feito pela Rachel Andrews explica melhor como usar Grid Layout e fazer um fallback para navegadores antigos COM E SEM FLEXBOX!!!!
Está em inglês, mas futuramente, como mencionei acima, pretendo fazer um conteúdo para cobrir isso e acabar com esse mito de que só podemos escolher um (Grid Layout) ou outro (suporte a navegadores antigos).
As pessoas buscam um truque simples para não ter que se preocupar com navegadores antigos nunca mais, quando na verdade o real truque pra não ter mais problemas com isso é realmente entender a fundo o funcionamento das CSS.
CSS não é decoreba, chute ou qualquer coisa nesse sentido, se você tratar essa tecnologia dessa forma, acabará encontrando muitas dificuldades quando enfrentar um cenário desses onde você precisa entender bem o que fazer e qual direção tomar, ao invés de simplesmente ficar chutando, tornando a sua folha de estilos uma bagunça e de difícil manutenção.
Terminologia
Não tem como falarmos de CSS Grid Layout sem mencionar a sua terminologia. Por quê? Porque sem ela fica muito difícil aplicar, na prática, os conceitos de Grid Layout. Mas fica tranquilo que vamos cobrir isso de maneira bastante completa e detalhada, calma que eu tô aqui exatamente pra isso.
Eu vou cobrir 6 conceitos chave aqui.
- Grid;
- Grid Lines;
- Grid Tracks;
- Grid Cell;
- Grid Gap;
- Grid Area.
Grid
O primeiro deles é o Grid propriamente dito, ele não é nada além de um quadriculado, uma estrutura geométrica com eixo vertical e horizontal.
Grid Lines
São linhas horizontais e verticais que definem o grid da esquerda para a direita e de cima para baixo.
Grid Tracks
É o espaço que existe entre duas grid lines, pode ser vertical ou horizontal.
Grid Cell
É o espaço quadrilátero (pelas linhas verticais e horizontais) que está ocupado, lembrando o nosso querido Excel.
Grid Gap
É o espaço existente entre as células de um grid, seria como aumentar a espessura dos Grid Lines.
Grid Area
Nada mais é do que o espaço ocupado por um conjunto de células dentro do grid.
Medida FR
Bom, basicamente essa medida nasceu em conjunto com o desenvolvimento das especificações do Grid Layout.
Para exemplificar a ideia da unidade de medida FR, vamos pensar em um grid com 5 colunas de tamanhos iguais.
100% de largura dividido por 5 dá 20% para cada coluna, correto? Pois bem, digamos que em algum momento do desenvolvimento, depois de definir o tamanho das colunas, depois de pensar em toda a responsividade do seu projeto, você precisa adicionar um Grid-Gap ou ainda tirar ou adicionar uma coluna? Você provavelmente teria um problema com overflow, pois no caso de adição de mais uma coluna ou inserção de um gap ultrapassaria 100% de largura, correto? Então seria necessário usar a propriedade calc() das CSS pra conseguir refazer todo o calculo necessário para não ter overflow.
Dependendo do caso, seria um tanto quanto trabalhoso, né? Mas com a unidade de medida FR isso não acontece. Você define o tamanho da sua coluna ou linha utilizando essa medida da mesma forma que você utilizaria porcentagem ou pixels.
Ao invés de definir 20% de largura pra cada coluna, você definiria 1fr e pronto, simples assim. Se for necessário adicionar um Grid-gap posteriormente, você pode fazer sem dor de cabeça, a medida já vai cuidar de todos os cálculos necessários pra que não haja nenhum overflow pra você, bacana, né?
Essa pen exemplifica o que eu expliquei logo acima, eu apenas defini 1 fração pra cada coluna, com um grid-gap de 10px entre essas colunas. Ele já fez todo o calculo pra mim, sem que eu tenha nenhuma dor de cabeça.
Há uma função que nos ajuda ainda mais a declarar a quantidade de colunas, essa função se chama repeat(), mas falaremos dela mais adiante.
Nesse o mais importante é entender o conceito da unidade de medida fração (FR).
E claro, se houver qualquer dúvida, só chamar que eu te ajudo.
Conclusão dessa primeira parte
A ideia aqui é mostrar um pouco da história das CSS no que tange a criação de layouts, falar um pouco dos conceitos e cobrir rapidamente algumas ideias-chave que estão ligadas ao Grid Layout.
Na próxima parte, criarei uma coisa mais prática para que a gente possa colocar a mão na massa de fato e entender ainda melhor a ideia de Grid Layout.
Já adianto que vai ter muito material de CSS Grid Layout aliado ao Flexbox, com fallbacks para navegadores antigos e coisas ainda mais profundas, mas nessa pequena série a ideia é somente entender o que o Grid Layout tem a nos oferecer.
Espero que tenham gostado e caso tenham duvidas, estarei à disposição.
Valeu!
