Per Harald Borgen 2 de dezembro de 2017
A CSS Grid é uma nova maneira de criar layouts na web. Pela primeira vez, temos um sistema de layout adequado disponível no navegador, o que nos dá uma tonelada de benefícios.
Esses benefícios se tornam especialmente claros se você comparar o CSS Grid ao framework mais popular de todos: o Bootstrap (que criamos um curso gratuito aqui btw). Não apenas você pode criar layouts que antes não eram possíveis sem introduzir JavaScript, mas seu código seria mais fácil de manter e entender.
Neste artigo, vou explicar porquê.
Nota: Eu também criei um curso grátis CSS Grid. Clique aqui para obter acesso total a ele.
Alternativamente, confira este artigo , que explica o que você aprenderá ao longo do curso:
Quer aprender CSS Grid? Aqui está o meu curso completo gratuito. Feliz Natal!
13 screencasts interativos para levá-lo do iniciante ao avançado. medium.freecodecamp.org
Agora, vamos olhar para as três principais razões pelas quais eu acho que o CSS Grid é melhor do que o Bootstrap.
Sua marcação será mais simples
A troca do Bootstrap pelo CSS Grid tornará seu HTML mais limpo. Embora esse não seja o benefício mais importante, é provável que seja o primeiro que você notará.
Para exemplificar isso, criei um layout fictício para um site, para que possamos comparar o código necessário para as duas versões. Aqui está:
Nota: Eu dei o exemplo um pouco de design. No entanto, isso não tem nada a ver com a comparação entre CSS Grid e Bootstrap, então vou manter essa parte do CSS fora dos meus exemplos de código.
Bootstrap
Vamos primeiro olhar para a marcação necessária para criar este site no Bootstrap.
Há duas coisas que quero que você observe aqui:
- Cada linha deve ser sua própria tag
<div>
. - Você usa nomes de classes para especificar o layout (
col-xs-2
). - À medida que esse layout cresce em complexidade, o mesmo acontece com o HTML.
Se este fosse um site responsivo, as tags normalmente pareceriam ainda piores:
Grade CSS
Agora vamos dar uma olhada no modo CSS Grid de fazer isso. Aqui está o HTML:
Eu poderia ter usado elementos semânticos aqui, mas eu estou escolhendo ficar com o div para facilitar a comparação com o exemplo do Bootstrap.
Podemos ver instantaneamente que essa marcação é mais simples. Longe estão os nomes de classe feios e as tags div extras necessárias para cada linha. É apenas um contêiner para a grade e itens dentro dela.
E, diferentemente do Bootstrap, essa marcação não aumenta muito a complexidade à medida que o layout cresce em complexidade.
No entanto, embora o exemplo do Bootstrap não exija que você adicione CSS, o exemplo da CSS Grid exige isso. Especificamente você terá que adicionar isto:
E isso pode ser um argumento a favor do Bootstrap para algumas pessoas: você não precisa se preocupar com o CSS para criar uma grade simples, já que você simplesmente define o layout no HTML.
Mas, como você vai entender no próximo ponto, esse acoplamento entre marcação e layout é, na verdade, uma fraqueza quando se trata de flexibilidade.
Muito mais flexibilidade
Digamos que você queira alterar seu layout de acordo com o tamanho da tela. Por exemplo, puxe o menu até a linha superior quando estiver sendo visualizado no celular.
Em outras palavras, altere o layout a partir disso:
Nisso:
Grade CSS
Fazer isso com CSS Grid é super simples. Vamos apenas adicionar uma consulta de mídia e embaralhar os itens da maneira que quisermos:
O fato de você poder reorganizar o layout dessa maneira, sem se preocupar com a forma como o HTML é escrito, é chamado independência da ordem de origem , e é uma grande vitória para desenvolvedores e designers.
O CSS Grid permite que você faça o HTML no que deveria ser. Marcação de conteúdo. Não visuais, que pertencem ao CSS.
Bootstrap
Se quiséssemos fazer a mesma coisa no Bootstrap, teríamos que alterar o HTML. Teríamos que mover a tag do menu até a linha superior, além do cabeçalho, já que o menu fica preso na segunda linha.
Fazer isso com base em uma consulta de mídia não é trivial. Não pode ser feito usando apenas HTML e CSS, então você precisa começar a brincar com JavaScript.
Este exemplo ilustra o maior benefício que experimentei com o CSS Grid até agora.
Não há mais 12 limitações de coluna
Este não é um problema tão grande, mas incomodou várias vezes. Como a grade do Bootstrap é dividida em doze colunas, você terá problemas se quiser um layout de cinco colunas. Ou sete. Ou nove. Ou qualquer coisa que não some até doze.
Com o CSS Grid, esse não é o caso. Você pode fazer sua grade ter exatamente a quantidade de colunas que você deseja. Aqui está uma grade de sete colunas.
Isso é feito configurando grid-template-columns
para repeat(7, 1fr)
, assim:
Agora pode haver uma maneira de invadir o Bootstrap e fazer isso funcionar também.
E estou ciente de que o Bootstrap 4 usa o Flexbox, o que também torna isso possível, mas ainda não está fora da versão beta.
Suporte de Navegador
Antes de terminar, é claro que também precisamos falar sobre o suporte ao navegador. No momento em que escrevemos este artigo, 75% do tráfego global do site é compatível com o CSS Grid.
No entanto, antes de você abolir completamente o pensamento de usar o CSS Grid, eu ouviria o que Morten Rand-Eriksen diz sobre esse assunto, que argumenta que o CSS Grid é uma oportunidade para reformular a maneira como pensamos sobre compatibilidade com versões anteriores:
Grade CSS é um módulo de layout ; nos permite alterar o layout de um documento sem interferir na sua ordem de origem. Em outras palavras, a grade CSS é uma ferramenta puramente visual e, usada corretamente, não deve afetar a comunicação do conteúdo do documento. A partir disso, segue uma verdade simples, mas surpreendente: a falta de suporte à grade CSS em um navegador antigo não deve afetar a experiência do visitante, mas apenas tornar a experiência diferente .
Em outras palavras, desde que você separou o conteúdo do visual, o resultado é que todos os visitantes serão apresentados com o conteúdo, no entanto, CSS Grid irá melhorar a experiência para aqueles que têm suporte para isso, através de um melhor layout .
Considerações finais
Por fim, quero compartilhar uma citação de Jen Simmons , advogada de desenvolvedores da Mozilla. Ela descreve o mesmo sentimento que eu tive com o CSS Grid depois de conhecê-lo:
Quanto mais eu uso o CSS Grid, mais eu estou convencido de que não há nenhum benefício a ser obtido adicionando uma camada de abstração sobre ele. CSS Grid é o framework de layout. Assado diretamente no navegador. – Jen Simmons
Se você está convencido de que o CSS Grid é o futuro e quer aprender mais, confira meu curso gratuito sobre o assunto aqui.