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 no CSS – um overview sobre as terminologias e vou mostrar a utilização através de um exemplo básico.

Nada complexo, porém, de uma maneira muito didática.

Vamos lá!

First things first

Para entender melhor a razão pela qual o CSS Grid existe, devemos entender, primeiro, alguns conceitos que envolvem não somente a construção de layouts na Web, mas também o CSS como um todo.

Lá no comecinho da década de 90, quando o 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 o Dr. Bert Bos, que é cocriador do CSS, ao lado de Håkon Wium Lie, o CSS surgiu 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 o 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 também foi uma das responsáveis por trazer para a web essa nova forma de criar layouts.

Depois de alguns anos e 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, 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 CSS para criação de layouts desde que o CSS foi criado há mais ou menos duas décadas.

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. Mas 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 para 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 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 truque real 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 que? Porque sem ela fica muito difícil aplicar, na prática, os conceitos de Grid Layout. Mas fique tranquilo, cobriremos isso de maneira bastante completa e detalhada – estou aqui exatamente pra isso.

Cobrirei seis 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 cinco 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() do CSS pra conseguir refazer todo o calculo necessário pra 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 para que não haja nenhum overflow. Bacana, né?

Essa pen exemplifica o que eu expliquei logo acima. Eu apenas defini uma fração para cada coluna, com um grid-gap de 10px entre essas colunas. Ele já fez todo o cálculo pra mim – sem 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. Aqui, o mais importante é entender o conceito da unidade de medida fração (FR).

E claro, se houver qualquer dúvida, deixe nos comentários que eu te ajudo.

Conclusão

A ideia aqui é mostrar um pouco da história do CSS no que se refere à 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 colocarmos 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! Caso tenham duvidas, estarei à disposição.

Valeu!