Porque CSS Grid é melhor que Bootstrap para criar layouts

Com o advento de CSS Grid, o framework front-end Bootstrap pode não ser mais tão necessário… Saiba mais sobre os poderes de CSS Grid para layouts.

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á:

Exemplo-base de layout

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!

CSS Grid permite que o HTML seja usado para o que foi criado: marcação de conteúdo, deixando tudo o que é visual para o CSS.

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.

Bootstrap #fail

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:

CSS Grid: exemplo de 7 colunas

Isso é feito configurando grid-template-columns para repeat(7, 1fr), tal como:

CSS Grid: código para 7 colunas

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, no momento da publicação deste artigo ele está em 87,56% — no Brasil sendo até um pouco maior, chegando a 90%.

Suporte de navegadores a CSS Grid (março de 2018)

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.

— Jen Simmons