Por que o CSS Grid é melhor que o Bootstrap para criar layouts

CSS Grid é uma nova maneira de criar layouts na web. Pela primeira vez, temos um sistema de layout adequado disponível nativamente no navegador, o que nos dá uma série de benefícios.

Esses benefícios tornam-se especialmente claros se você compara a grade CSS com a estrutura mais popular de todas elas: Bootstrap. Não só você pode criar layouts que anteriormente não era possível sem apresentar JavaScript, mas seu código será mais fácil de manter e entender.

Neste artigo, vou explicar o porquê.

Nota: Eu também criei um curso de Grade CSS grátis. Clique aqui para ter acesso total a ele.

Alternativamente, confira este artigo , o que explica o que você aprenderá ao longo do curso:

Quer aprender CSS Grid? Aqui está o meu curso completo completo. Feliz Natal!
13 screencasts interativos para levá-lo do iniciante ao avançado. medium.freecodecamp.org

Agora vejamos os meus três principais motivos para o que penso que o CSS Grid bate o Bootstrap.

Sua marcação será mais simples

Trocar o Bootstrap com o CSS Grid fará seu limpador de HTML. Embora este não seja o benefício mais importante, é provável que seja o primeiro que você notará.

Para exemplificar isso, criei um layout fofo para um site, para que possamos comparar o código necessário para as duas versões. Aqui está:

Nota: Dado 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 eu 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 eu quero que você note aqui:

  1. Cada linha deve ser sua própria marca <div> .
  2. Você usou nomes de classe para especificar o layout ( col-xs-2 ).
  3. À medida que esse layout cresce em complexidade, o mesmo acontece com o HTML.

Se este fosse um site responsivo, as tags normalmente pareceriam pior ainda:

Grade CSS

Agora vejamos a maneira CSS Grid de fazê-lo. Aqui está o HTML:

Eu poderia ter usado elementos semânticos aqui, mas eu estou escolhendo ficar com div's para facilitar a comparação com o exemplo Bootstrap.

Podemos ver instantaneamente que essa marcação é mais simples. Longe foram os nomes das classes feias e as tags div adicionais necessárias para cada linha. É apenas um recipiente para a grade e itens dentro dele.

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 você adicione CSS, o exemplo CSS Grid, claro, exige isso. Especificamente você terá que adicionar isso:

E isso pode ser um argumento a favor do Bootstrap para algumas pessoas: você não precisa se preocupar com CSS para criar uma grade simples, pois você simplesmente define o layout no HTML.

Mas, como você entenderá no próximo ponto, esse acoplamento entre marcação e layout é realmente uma fraqueza quando se trata de flexibilidade.

Muito mais flexibilidade

Digamos que você deseja 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 desta:

Nisso:

Grade CSS

Fazer isso com CSS Grid é super simples. Nós simplesmente adicionaremos uma consulta de mídia e baralharemos os itens, no entanto, queremos:

O fato de que você pode reorganizar o layout desta forma, sem se preocupar com a forma como o HTML está escrito é chamado de independência de ordem de origem , e é uma grande vitória para desenvolvedores e designers.

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 quisermos fazer o mesmo no Bootstrap, teríamos de mudar o HTML. Teríamos que mover a etiqueta 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 consulta de mídia não é trivial. Não pode ser feito usando apenas HTML e CSS, então você deve começar a mexer com o JavaScript.

Este exemplo ilustra o maior benefício que experimentei com o CSS Grid até agora.

Não há mais limitação de 12 colunas

Este não é um problema tão grande, mas irritou várias vezes. Como a grade Bootstrap é dividida em doze colunas, você entrará em problemas se desejar um layout de cinco colunas. Ou sete. Ou nove. Ou qualquer coisa que não adicione até doze.

Com o CSS Grid, este não é o caso. Você pode fazer sua grade ter exatamente a quantidade de colunas que deseja. Aqui está uma grade de sete colunas.

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

Agora, pode haver uma maneira de hackear o Bootstrap e fazer isso funcionar também.

E estou ciente de que o Bootstrap 4 usa o Flexbox, o que torna isso possível também, no entanto, ainda não está fora da versão beta.

Suporte do navegador

Antes de terminar, é claro que temos que falar sobre o suporte do navegador também. No momento da redação deste artigo, 75% do tráfego global do site suporta CSS Grid.

No entanto, antes de abolir completamente o pensamento de usar o CSS Grid, eu ouviria o que Morten Rand-Eriksen diz sobre esse assunto, o que argumenta que o CSS Grid é uma oportunidade para refletir a maneira como pensamos sobre a compatibilidade com versões anteriores:

A grade CSS é um módulo de layout ; Isso nos permite alterar o layout de um documento sem interferir com sua ordem de origem. Em outras palavras, a grade CSS é uma ferramenta puramente visual e usada corretamente, não deve afetar a comunicação dos conteúdos do documento. A partir disso, segue uma verdade simples mas surpreendente: a falta de suporte para a grade CSS em um navegador antigo não deve afetar a experiência do visitante, mas sim tornar a experiência diferente .

Em outras palavras, uma vez que você separou o conteúdo do visual, o resultado é que todos os visitantes serão apresentados com o conteúdo, no entanto, o CSS Grid irá melhorar a experiência para aqueles que receberam suporte para isso, através de um melhor layout .

Considerações finais

Finalmente, quero compartilhar uma citação de Jen Simmons , defensor dos desenvolvedores da Mozilla. Ela descreve o mesmo sentimento que recebi em relação ao CSS Grid depois de conhecê-lo:

Quanto mais eu uso CSS Grid, mais convencido estou de que não há nenhum benefício a ser obtido, adicionando uma camada de abstração sobre ele. CSS Grid é a estrutura de layout. Assado diretamente no navegador. – Jen Simmons

Se você está convencido, o CSS Grid é o futuro, e você quer aprender mais, deixe seu e-mail aqui e eu lhe enviarei acesso antecipado ao próximo curso da Grade CSS quando estiver pronto.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *