# Porque CSS Grid é melhor que Bootstrap para criar layouts > Comparativo técnico: CSS Grid vs Bootstrap. Descubra por que Grid oferece código mais limpo, flexibilidade superior e layouts antes impossíveis. URL: https://dpw.dev/css/css-grid-melhor-que-bootstrap/ Publicado em: 2018-03-19 Categoria: css Tags: analise, css-grid, layout, web-design-responsivo Autor: Tárcio Zemel **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. > Artigo baseado em [Why CSS Grid is better than Bootstrap for creating layouts](https://hackernoon.com/how-css-grid-beats-bootstrap-85d5881cf163). 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](/images/blog/css-grid-melhor-que-bootstrap/1521159341-css-grid-melhor-que-bootstrap-layout-base.webp) 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: ![](/images/blog/css-grid-melhor-que-bootstrap/1521160305-1_DDEzyfi_UqN40GNHn9bGIQ.webp) Há duas coisas que merecem atenção aqui: - Cada linha deve ser sua própria `
` - É 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: ![](/images/blog/css-grid-melhor-que-bootstrap/1521161214-1_Qx8HqZRFD4GnPr8spuh-rw.webp) ### CSS Grid Agora, eis a maneira [CSS Grid](https://www.youtube.com/watch?v=q_WV9exilhk&list=PLYgzkrmJnLwpeeGgdADYq3cE2yUwLLTOv&index=1&t=1s) de se fazer (poderiam ter sido usados elementos semânticos aqui, mas optou-se por `
`s para facilitar a comparação com o exemplo usando Bootstrap): ![](/images/blog/css-grid-melhor-que-bootstrap/1521161377-1_CRx4NN3ZuNeOFht4FolweQ.webp) É possível constatar instantaneamente que essa marcação é mais simples! Nada de nomes feios de classes ou `
`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: ![](/images/blog/css-grid-melhor-que-bootstrap/1521162142-1_2u5SFSohe1ykeDizguI0Fg.webp) ## 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: ![](/images/blog/css-grid-melhor-que-bootstrap/1521204684-1_FOV3oyzr4W95Ga93rlDHjw.webp) ### 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 é: ![](/images/blog/css-grid-melhor-que-bootstrap/1521204975-1_rifGXgLrNlMLyQwGaw8kYA.webp) 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](/images/blog/css-grid-melhor-que-bootstrap/1521205513-1_vo73iv-OFbObYlFrnzUmHA.webp) 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](/images/blog/css-grid-melhor-que-bootstrap/1521205828-1_H4hD540swPWkkT04rmEohg.webp) Isso é feito configurando `grid-template-columns` para `repeat(7, 1fr)`, tal como: ![CSS Grid: código para 7 colunas](/images/blog/css-grid-melhor-que-bootstrap/1521205908-1_vRCciwjHRmw-Dfjga9X7sw.webp) 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%! ![Suporte de navegadores a CSS Grid (maio de 2019)](/images/blog/css-grid-melhor-que-bootstrap/css-grid-suporte-maio-2019-1024x412.webp) [Morten Rand-Eriksen mostra](https://www.smashingmagazine.com/2017/06/building-production-ready-css-grid-layout/) 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 > **Dica:** [Faça nosso curso completo de CSS Grid grátis!](https://www.youtube.com/watch?v=q_WV9exilhk&list=PLYgzkrmJnLwpeeGgdADYq3cE2yUwLLTOv) 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 --- Fonte: [dpw - desenvolvimento para web](https://dpw.dev/) (pt-BR). Guia para agentes: https://dpw.dev/llms.txt Índice completo: https://dpw.dev/sitemap-index.xml Feed: https://dpw.dev/rss.xml