Per Harald Borgen Blocked Desbloquear Seguir Seguindo 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:

1. Cada linha deve ser sua própria tag <div> .
2. Você usa nomes de classes 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 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.

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.