É possível observar que nos últimos meses começaram a aparecer frameworks baseados em CSS Grid Layout. Infelizmente, eles ainda não “convenceram”, não acrescentando qualquer vantagem em usar CSS Grid Layout em detrimento a frameworks já existentes.
Pior: os que puderam ser vistos até agora dão um passo para trás, limitando-se a replicar o passado (através de marcações de wrappers de linha) ao invés de olhar para o futuro.
Porque CSS Grid é diferente?
CSS Grid Layout é um sistema de grids que permite a definição de linhas e colunas no CSS sem precisar defini-las na marcação. Com CSS Grid, não é preciso alguma ferramenta que ajude a fazer parecer que se tem uma grid; realmente se tem uma grid para leiautar!
A razão pela qual nossos métodos legados precisam de wrappers de linha é porque estamos falseando uma grid atribuindo larguras a itens. Em seguida, aplicamos pushs e pulls nos itens para fazer lacunas entre eles.
Em um sistema de grid baseado em floats, é preciso envolver os elementos (wrap) que compõem cada linha e dar o clear para que as coisas na próxima linha fiquem certas. Em uma grid baseada em flex, é preciso marcação de linhas para definir um novo flex container — ou ser muito esperto nas atribuições de wrapping, flex basis e margens para conseguir o mesmo efeito.
Com CSS Grid esses wrappers de linha não são precisos porque são definidas linhas e colunas para posicionar os itens; não há perigo de itens de grid “pularem” para outra linha. Quando se opta pela abordagem de definir wrappers de linhas, cada linha se torna um novo grid layout unidimensional, e há pouco benefício em usar o CSS Grid em detrimento de Flexbox se houver a limitação de uma única dimensão.
O que pode ser útil em um “framework” que usa CSS Grid?
A palavra “framework” está um pouco “carregada” neste momento, mas, por exemplo, um conjunto de helpers Sass pode ser útil para impor uma certa maneira de usar CSS Grid. Ao ler a especificação de CSS Grid, é possível perceber que existem diferentes métodos para criar o mesmo resultado final: é possível nomear áreas, usar números de linha ou nomes de linha; pode-se optar por colocar tudo de forma explícita ou depender de colocação automática. Se todos os envolvidos nos projetos com Grid usarem um método diferente, o resultado final será mais difícil de ler e manter.
O mesmo pode ser verdade para o código de fallback. Se foi decidido como lidar com navegadores não compatíveis com CSS Grid Layout, algumas ferramentas podem ajudar a garantir que as decisões tomadas são implementadas da mesma maneira em todos os lugares. No entanto, essa abordagem seria muito mais útil quando desenvolvida a nível de projeto ao invés de importar os requisitos e metodologias de terceiros “por atacado”.
Antes de entrar de cabeça em um novo “Grid Layout framework”, certifique-se de ter compreendido primeiro como Grid Layout realmente funciona. Saiba por que você está criando uma abstração e o que ela oferece — e também no que ela pode limitar.
Abrace as novas possibilidades
Rachel Andrew apresentou uma frase muito interessante em uma de suas palestras sobre o assunto:
Flexbox e CSS Grid são muito diferentes. Se você desenvolver usando métodos antigos primeiro, você não aproveitará suas possibilidades criativas.
O contexto aqui era em termos de lidar com navegadores antigos. A ideia era encorajar as pessoas a pensar sobre os novos navegadores primeiro: começar com uma boa marcação para, então, procurar criar o design para os navegadores que utilizam métodos como Grid e Flexbox.
Quando se começa por navegadores antigos, inevitavelmente pode haver limitação de capacidades/possibilidades. O ponto central da ideia é criar marcação sólida, organizada por elementos adicionais que o passado diz que são necessários; desenvolver sites usando o que CSS Grid e outros métodos novos têm a oferecer. Em seguida, ver como é preciso lidar com os navegadores sem suporte, servindo-lhes algo um pouco mais simples — em suma, graceful degradation.
Talvez o design da Grid se baseie em poder mesclar linhas (span rows), algo que é difícil de conseguir sem marcação extra e layout preciso em navegadores mais antigos. O fallback pode ser usar Flexbox e criar um layout sem esses row spans — uma solução não tão “pura”, mas completamente utilizável e sem necessidade de interferência na marcação extra para um número cada vez menor de visitantes.
É possível ver um exemplo muito bom em um dos vários padrões com fallbacks que podem ser encontrados no imperdível Grid by Example:
See the Pen Header, as many as will fit, some tall, footer by rachelandrew (@rachelandrew) on CodePen.
Conclusão
Se você se limitar ao que foi antes, usando somente as partes de Grid que você pode recriar em navegadores mais antigos ou usando algum framework que, querendo ou não, impõe esse limite, acaba perdendo as possibilidades criativas de usar CSS Grid. Nesse caso, por que se preocupar?
Também é possível usar apenas código legado. Mas isso seria uma pena.