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:
- Cada linha deve ser sua própria marca
<div>. - Você usou nomes de classe 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 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.
