CSS Grid é uma nova maneira de criar layouts na web. Pela primeira vez, temos um sistema de layout adequado disponível nativamente nos navegadores, o que oferece uma série de benefícios.
Esses benefícios se tornam especialmente claros se você compara CSS Grid com o framework de front end mais popular: Bootstrap — lembrando que o “mais popular” não necessariamente é o melhor.
Não só é possível desenvolver layouts que anteriormente eram impossíveis sem JavaScript, mas o código fica mais fácil de manter e entender.
Marcação mais simples
Trocar Bootstrap por CSS Grid fará do código HTML mais limpo. Embora este não seja o benefício mais importante, é provável que seja o que primeiro se notará.
Para exemplificar, imagine um layout genérico para um site para que seja possível comparar o código necessário. Aqui está:
Um pouco de estilo foi colocado no exemplo, mas isso não tem nada a ver com a comparação entre CSS Grid e Bootstrap, o que servirá de licença para manter essa parte do CSS fora dos exemplos de código.
Bootstrap
Primeiramente, eis a marcação necessária para criar este site com Bootstrap:
Há duas coisas que merecem atenção aqui:
- Cada linha deve ser sua própria
<div> - É preciso usar nomes de classes (
col-xs-12) - À medida que esse layout cresce em complexidade, o mesmo acontece com o HTML
Se se tratasse de um site responsivo, as coisas não seriam melhores:
CSS Grid
Agora, eis a maneira CSS Grid de se fazer (poderiam ter sido usados elementos semânticos aqui, mas optou-se por <div>s para facilitar a comparação com o exemplo usando Bootstrap):
É possível constatar instantaneamente que essa marcação é mais simples! Nada de nomes feios de classes ou <div>s adicionais necessárias para cada linha. É apenas um container para a grid com itens dentro.
E, ao contrário do Bootstrap, essa marcação não aumentará muito em complexidade à medida que o layout cresce em complexidade.
No entanto, enquanto o exemplo Bootstrap não exige que se adicione CSS, o exemplo CSS Grid, claro, exige isso. Especificamente, é preciso adicionar:
Muito mais flexibilidade
Digamos que seja preciso alterar o layout de acordo com o tamanho da tela. Por exemplo, o menu ficar na linha superior quando estiver sendo visualizado em viewports menores. Algo como:
CSS Grid
Fazer isso com CSS Grid é bem simples. Basta simplesmente adicionar uma media query e alterar como os itens se dispõem. No entanto, o que se quer é:
O fato de ser possível reorganizar o layout desta forma, sem se preocupar com a maneira como o HTML está escrito, pode ser chamado de Independência da Ordem no Código (Source-Order Independence), e é uma grande vitória para desenvolvedores e designers!
Bootstrap
Comparativamente, se fosse preciso fazer o mesmo com Bootstrap, seria preciso mudar o HTML… Teria-se que mover a tag do menu para a linha superior, além do cabeçalho, pois o menu está “preso” na segunda linha.
Fazer isso com base em uma media query não é algo trivial. Não pode ser feito usando apenas HTML e CSS; seria preciso começar a mexer com JavaScript.
Sem sombra de dúvidas, este exemplo ilustra um dos maiores benefícios ao se trabalhar com CSS Grid.
Sem limitação de 12 colunas
Este não é um problema tão grande, mas que é no mínimo irritante. Como a grid de Bootstrap é dividida em 12 colunas (por padrão), pode ser que haja problemas em situações que exijam, por exemplo, um layout de 5 colunas. Ou 7. Ou 9.
Com CSS Grid, este não é o caso. É possível fazer uma grid com exatamente a quantidade necessária de colunas. Aqui está um exemplo de uma grid de 7 colunas:
Isso é feito configurando grid-template-columns para repeat(7, 1fr), tal como:
Lembrando que Bootstrap 4 usa Flexbox, o que torna isso possível também — mas não era até então.
Suporte atual de navegadores a CSS Grid
Falando sobre o suporte de navegades a CSS Grid, atualmente ele está em 89,78% — no Brasil sendo até um pouco maior, chegando a quase 95%!
Morten Rand-Eriksen mostra que CSS Grid é uma oportunidade para refletir a maneira como se pensa sobre a compatibilidade com versões anteriores:
CSS Grid é um módulo de layout (layout module); permite alterar o layout de um documento sem interferir com sua ordem (Source-Order Independence). Em outras palavras, a CSS Grid é uma ferramenta puramente visual e, usada corretamente, não deve afetar a comunicação dos conteúdos no documento. A partir disso, segue uma verdade simples, mas surpreendente: a falta de suporte a CSS Grid em um navegador antigo não deve afetar a experiência do visitante, mas torná-la diferente.
Em outras palavras, uma vez que você se tenha separado o conteúdo do visual, o resultado é que o conteúdo será servido a todos os visitantes. No entanto, CSS Grid irá melhorar a experiência de todos aqueles que receberam suporte para isso através de um layout melhor.
Conclusão
Por fim, cabe uma citação de Jen Simmons, “developer advocate” na Mozilla. Ela descreve bem o sentimento da maioria dos desenvolvedores ao conhecer CSS Grid:
Quanto mais eu uso CSS Grid, mais convencida fico de que não há nenhum benefício a ser obtido em adicionar qualquer camada de abstração. CSS Grid é a estrutura de layout. Diretamente no navegador.