Em março, Mozilla lançou o Firefox 52, que adicionou suporte ao CSS Grid Layout. Se você não está familiarizado com o CSS Grid, ele é um sistema de layout bidimensional para a web que nos permite criar padrões de layout nativamente no navegador. Isto significa que podemos facilmente recriar grelhas familiares usando apenas algumas linhas de CSS. Também significa que podemos fazer muito com CSS e layouts que não era possível antes… mas mais sobre isso em um pouco.
Uma nota rápida: Este post não é para ser um primer abrangente para CSS Grid, e assume uma familiaridade básica com CSS Grid. Se você ainda não o fez, eu recomendaria dar uma olhada na fantástica página de layout do CSS Grid em MDN.
Layouts na web sempre foram complicados. Quando a web foi introduzida pela primeira vez, não havia nenhum método para layouts. Depois vieram as tabelas (em tabelas, em tabelas, em tabelas). Era hackish e esquisito, mas funcionava. Quando o CSS foi introduzido no final dos anos 90, os desenvolvedores puderam começar a usar divs e floats para seus designs e layouts. Isso acabou levando a frameworks e sistemas de grid que ajudaram a dar sentido a todas as “gotchas” como limpeza de flutuações, margens negativas, design responsivo e muito mais. E é assim que as coisas têm sido desde há anos. Existem milhares de sistemas de grid, mas todos eles são, mais ou menos, iguais.
Agora o CSS Grid Layout é uma realidade, eu queria ver o que seria necessário para substituir um grid framework existente por CSS Grid. Para este experimento, escolhi o popular framework Bootstrap.
Comecei criando um site básico usando o grid Bootstrap:
Veja-o no CodePen.
Então vamos quebrar isso e convertê-lo para usar o CSS Grid.
No Bootstrap, a classe .container envolve tudo e define as restrições de largura. Ela também adiciona um acolchoamento nas bordas esquerda e direita e centraliza tudo. Não há muito a mudar aqui. Assim como com o Bootstrap, a classe container pode ser útil para usar com CSS Grid. Eu a recriei assim:
.container { margin-left: auto; margin-right: auto; padding-left: 15px; padding-right: 15px;}Também podemos adicionar pontos de quebra responsivos adicionando o seguinte:
@media (min-width: 992px) { .container { width: 970px; }}Bootstrap usa a classe .row para embrulhar colunas e fornecer uma margem negativa à esquerda e à direita para negar o acolchoamento adicionado por colunas individuais. Hacks como margens negativas não são mais necessários com o CSS Grid, mas se você leu a documentação, você saberá que o CSS Grid requer um container de grid. A classe .row é o lugar perfeito para fazer isso. Deixe-me mostrar o que eu fiz, e depois vamos decompor.
.row { display: grid; grid-template-columns: repeat(12, 1fr); grid-gap: 20px;}display: grid cria o container da grade.
A propriedade grid-template-columns define as colunas para a grade. Você pode usar espaços para definir cada coluna individualmente, mas aqui utilizamos a notação de repetição para definir 12 colunas de mesmo tamanho. 1fr refere-se à largura da coluna individual. MDN define a unidade fr como uma nova unidade que “representa uma fração do espaço disponível no contêiner da grade”. Você pode ler mais sobre unidades de fr no MDN. Você também pode ler mais sobre a propriedade grid-template-columns.
Finally, a propriedade grid-gap é uma propriedade de shorthand que define tanto a quantidade de espaço entre as colunas quanto entre as linhas de colunas. Pense nela como a nossa sarjeta. Você pode ler mais sobre grid-gap aqui.
Agora, tudo o que resta são as classes de colunas. Bootstrap usa classes de colunas como .col-md-6 ou .col-lg-8 para determinar o número de colunas que um mergulho deve abranger. Ele também flutua o div e adiciona acolchoamento à esquerda e à direita para criar calhas entre as colunas. Recriar estas classes é incrivelmente fácil graças à propriedade .grid-column shorthand. Por exemplo, se quisermos recriar a classe .col-md-6, podemos usar o seguinte:
@media (min-width: 992px) { .col-md-6 { grid-column: span 6; }}Simples, certo? Sem flutuadores. Sem estofamento. Apenas funciona. A estenografia grid-column especifica o tamanho e localização de um item. Podemos usar span para indicar que este item em particular deve abranger seis colunas. A sarjeta é tratada automaticamente por causa da propriedade grid-gap do invólucro. Você pode aprender mais sobre a propriedade grid-column aqui.
Então o que acontece quando você coloca tudo junto? Bem, o site parece exatamente o mesmo, mas somos capazes de remover completamente a dependência do Bootstrap e usar grades CSS nativas.
Check out the update website on CodePen.
Este tipo de experiência é um exercício de aprendizagem divertido, mas também pode ser perigoso. Para pegar uma linha do sábio filósofo Jeff Goldblum:
“Você … estava tão preocupado se você poderia ou não, você não parou para pensar se deveria.”
Não queremos limitar o CSS Grid por meio de uma calçada que irá limitar o seu potencial. Nós fomos capazes de recriar facilmente a grade Bootstrap, mas a CSS Grid é muito mais poderosa do que qualquer sistema de grade que veio antes dela. Isso porque é uma solução web-native construída do chão para cima.
Não estamos mais presos em 12 grades de colunas que flutuam da esquerda para a direita. Você quer colocar elementos em locais precisos na grade, independente de sua ordem de código HTML? Vá em frente. Você quer criar itens que abranjam várias colunas e filas? Não é um problema. Confira esta demo que o Craig Cook do Mozilla criou para mostrar vários padrões de layout. Tente recriar alguns desses layouts usando o Bootstrap (dica: não é possível). Estamos apenas arranhando a superfície do que o CSS Grids pode fazer.