O CSS Grid é robusto, flexível e uma mudança de paradigma refrescante de outros sistemas de layout CSS. Embora esses sejam pontos de venda para o Grid, eles também dificultam o aprendizado.
“Aprender” O CSS Grid requer o desenvolvimento de conhecimento prático de muitas novas propriedades que não apenas descrevem umaspecto da aparência ou comportamento, mas alimentam um sistema de layout completamente novo. Este sistema inclui cerca de 18 propriedades que usam paradigmas e sintaxe raramente (ou nunca) visto em qualquer outro lugar na especificação CSS.
Isso significa que o CSS Grid tem um nível de habilidade muito alto – um desenvolvedor precisa aprender e internalizar muitas novas informações para ser eficaz. Uma vez que você está acima do nível de habilidade, o Grid é um incrível aliado na criação de layouts. Abaixo desse piso, o Grid é um obstáculo. Você se pergunta por que está se incomodando em usá-lo, já que parece exigir muito trabalho adicional para pouca recompensa.
Neste post, quero ajudá-lo a superar esse piso de habilidades mostrando as maneiras mais eficazes de aproveitar as especificações de grade. Embora eu não esteja cobrindo toda a especificação – para algo assim, veja este post de Truques de CSS – mas o que abordo aqui são, para mim, os aspectos úteis deste sistema de layout.
Use nomes, não números
As colunas e linhas da grade, em sua forma mais básica, são referidas por número. Por exemplo, esse CSS configura uma grade com duas colunas e coloca o conteúdo principal da página na segunda coluna:
.container {
display: grid;
grid-template-columns: 1fr 2fr;
}
.content {
grid-column: 2;
}
Isso funciona, mas falta um recurso incrível do Grid: você pode dar nomes específicos a suas linhas e colunas. Você deve aproveitar isso sempre que possível.
Aqui está o mesmo CSS, ajustado para usar nomes:
.container {
display: grid;
grid-template-columns: [sidebar] 1fr [content] 2fr;
}
.content {
grid-column: content;
}
Mesmo em casos leves como esse, é vantajoso nomear as áreas da grade.
Benefícios
Adicionar nomes à sua grade traz alguns benefícios importantes.
Legibilidade – logo de cara, seu código é mais fácil de entender. A linha 3 agora descreve tudo que está acontecendo dentro do contêiner Grid. Você não está apenas listando colunas; você está delineando a intenção de cada coluna.
A linha 7 também se tornou mais descritiva. Anteriormente, sabíamos apenas que .contentvivia na segunda coluna, o que não significa muito sem mais contexto – coluna 2 de 3? 2 de 200? Atribuir um nome de coluna, no entanto, indica que esse elemento foi especificamente explicado no sistema maior. A nomeação também facilita a localização da declaração da coluna original, caso seja necessário.
À prova de futuro – Adicionar nomes torna o seu CSS mais flexível. Especificamente, você pode iterar .containersem precisar editar .content.
Quer trocar a ordem visual do conteúdo e da barra lateral? Fácil.
.container {
display: grid;
grid-template-columns: [content] 2fr [sidebar] 1fr;
}
.content {
grid-column: content;
}
Quer adicionar outra coluna? Não prob.
.container {
display: grid;
grid-template-columns: [related-posts] 1fr [sidebar] 1fr [content] 2fr;
}
.content {
grid-column: content;
}
Sem usar colunas nomeadas, você teria que atualizar o número da coluna na linha 7 para refletir as alterações feitas na linha 3. Colunas nomeadas fornecem .contentum comportamento consistente que é independente da contagem ou ordem da coluna.
Use frcomo sua unidade flexível
O CSS Grid apresenta a frunidade, que diz a uma área para ocupar alguma fração do espaço total disponível. Embora frpareça um sidenote dentro da especificação Grid, é realmente indispensável.
A frunidade é diferente de %ou vwporque enquanto as últimas unidades descrevem partes de um conjunto de 100 unidades, frs são definidas pelo espaço que ainda não foi usado por outra coisa. frs dividir este espaço em relação ao outro.
Aqui, a contentcoluna é duas vezes mais larga que a sidebarcoluna.
.container {
display: grid;
grid-template-columns: [sidebar] 1fr [content] 2fr;
}
.content {
grid-column: content;
}
Como não há nenhuma frunidade e três frs no total, 1fr = ~ 33% da largura da grade.
Benefícios
A frunidade oferece algumas coisas que faltam em outras unidades flexíveis.
Legibilidade e intenção mais clara – O uso de frs, diferentemente do uso de porcentagens, nos permite ficar com números inteiros que são dimensionados em relação um ao outro, não em relação a um todo. Isso mantém o comportamento pretendido claro. Por exemplo, a linha 3 é simples de traduzir para o inglês: “O conteúdo é duas vezes maior que a barra lateral”.
frs também permite dividir espaço de maneiras que seriam difíceis de calcular (e ler) usando porcentagens.
.container {
display: grid;
grid-template-columns: [sidebar] 3fr [content] 4fr;
}
Menos matemática – O maior benefício do frsoftware é que ele assume a responsabilidade de fazer a aritmética exata do desenvolvedor e o transfere para o mecanismo de layout do navegador. Por exemplo, aqui está uma CodePen mostrando duas maneiras de criar o mesmo layout usando CSS Grid.
Essas linhas são o ponto crucial da demonstração:
.percents, .frs {
display: grid;
grid-column-gap: 20px;
}
.percents {
grid-template-columns: repeat(3, calc((100% - 40px)/3))
}
.frs {
grid-template-columns: repeat(3, 1fr);
}
O código na linha 7 é difícil de escrever, difícil de ler e quebradiço. Qualquer alteração grid-column-gapou a nossa contagem de colunas interromperá o layout, a menos que atualizemos manualmente a largura da coluna para corresponder.
A linha 11 pode ignorar o tamanho do intervalo e não precisará de nova matemática se atualizarmos a contagem de colunas. É fácil de ler e à prova do futuro.
Não use um sistema de grade
Essa recomendação contraditória se estende para além das especificações CSS Grid e sangra em como o web design funciona e como os desenvolvedores interagem com os designers e seu trabalho.
Layouts são geralmente entendidos como elementos alinhados ao longo de um sistema de grade.
Normalmente, o desenvolvimento busca a paridade exata com o design. Se os projetos forem baseados em uma grade de 14 colunas, o desenvolvimento configurará algum tipo de grade de 14 colunas no código e escreverá classes auxiliares para que os itens ocupem as colunas 1, 2, 3, 6, etc. A maioria dos frameworks de frontend, como o Bootstrap , funciona dessa maneira.
No exemplo acima, temos uma grade de 14 colunas, com esses elementos para colocar e dimensionar:
- O cabeçalho, que começa na coluna 2 e abrange 12 colunas
- A barra lateral, que começa na coluna 2 e abrange 4 colunas
- O conteúdo principal, que começa na coluna 6 e abrange 8 colunas
No CSS Grid, é fácil configurar um sistema que imita o design:
.main {
display: grid;
grid-column-gap: 2rem;
grid-row-gap: 1rem;
grid-template-rows: [header] 100px [body] auto;
grid-template-columns: repeat(14, 1fr);
}
.header {
grid-row: header;
grid-column: 2 / span 12;
}
.sidebar {
grid-row: body;
grid-column: 2 / span 4;
}
.content {
grid-row: body;
grid-column: 6 / span 8;
}
Mas isso é realmente um bom plano? Nossa tentativa de reprodução 1: 1 tem dois inconvenientes.
Primeiro, frustra nosso plano de nomear colunas. Além disso, de nossas 14 colunas, estamos apenas “usando” as colunas 2, 5, 6 e 13. Isso funciona tecnicamente , mas sugere uma relação sinal-ruído ruim.
Ambos os problemas são resolvidos se pudermos adotar alguns passos do design original:
.main {
display: grid;
grid-column-gap: 2rem;
grid-row-gap: 1rem;
grid-template-rows: [header] 100px [body] auto;
grid-template-columns: [left-gutter] 1fr [sidebar] 4fr [content] 8fr [right-gutter] 1fr;
}
.header {
grid-row: header;
grid-column: sidebar / right-gutter;
}
.sidebar {
grid-row: body;
grid-column: sidebar;
}
.content {
grid-row: body;
grid-column: content;
}
Agora, em vez de ter quatorze colunas, temos apenas quatro, mas elas ainda dividem o espaço lateral em catorze partes. Temos exatamente o mesmo efeito visual que na primeira iteração, mas nosso código é menos ruidoso e reflete diretamente como ele é usado.
Podemos continuar esse paradigma ao longo do layout. Digamos que dentro do .contentelemento, precisamos de informações auxiliares (uma biografia do autor, uma sinopse, etc.) ao lado do artigo principal.
Se aderimos firmemente à rede de 14 colunas, parece que precisamos de algo como isto:
.content {
grid-row: body;
grid-column: 6 / span 8;
}
.article {
grid-column: 7 / span 4;
}
.info {
grid-column: 11 / span 12;
}
O que será complicado, já que o CSS Grid não tem nenhum conceito de herança. .infonão sabe nada sobre a grade criada em .mainseu elemento avô.
Se deixarmos a grade literal de 14 colunas, no entanto, podemos notar isso .articlee .infonão precisamos saber nada sobre a grade de nível superior – eles fazem parte de uma nova grade dentro de .content.
.content {
grid-row: body;
grid-column: content;
display: grid;
grid-template-columns: [left-gutter] 1fr [article] 4fr [info] 2fr [right-gutter] 1fr;
grid-column-gap: 2rem;
}
.article {
grid-column: article;
}
.info {
grid-column: info;
}
Usar essa configuração .contenté simples e internamente consistente, mas também se alinha perfeitamente às nossas colunas externas configuradas .main.
Benefícios
Além do que já descrevi, a adesão mais frouxa ao sistema de design original nos coloca como desenvolvedores para alavancar nossa experiência e nossas ferramentas – o navegador – de forma mais eficaz. Pixels e colunas são menos salientes do que relacionamentos e espaço proporcional.
Não é significativo que .articlecomeça na coluna 7 e .infona coluna 11. Ele é significativo que .articleé duas vezes tão grande como .info. Pensar sobre os elementos proporcionalmente e questionar como eles interagem uns com os outros nos ajuda a tratar os layouts como sistemas dinâmicos.
Sidenote: marcação de aninhamento
Uma coisa que você pode ter notado sobre os exemplos de código nesta seção é o uso de left-guttere right-guttercolunas. Este CSS pressupõe o HTML mais plano possível.
<div class="main">
<div class="header"></div>
<div class="sidebar"></div>
<div class="content"></div>
</div>
.main {
display: grid;
grid-template-columns: [left-gutter] 1fr [sidebar] 4fr [content] 8fr [right-gutter] 1fr;
}
Se estivermos dispostos a colocar um wrapper div na marcação, poderemos escrever CSS mais direto com menos colunas por elemento.
<div class="main">
<div class="wrapper">
<div class="header"></div>
<div class="sidebar"></div>
<div class="content"></div>
</div>
</div>
.main {
display: grid;
grid-template-columns: [left-gutter] 1fr [wrapper] 12fr [right-gutter] 1fr;
}
.wrapper {
grid-column: wrapper;
display: grid;
grid-template-columns: [sidebar] 1fr [content] 2fr;
}
A segunda abordagem parece inerentemente melhor porque a matemática é mais simples – você pode parar de se preocupar o mais rápido possível com os números que somam 14 e pensar em uma proporção de 1: 2. Isso parece verdade para o espírito da CSS Grid.
O que não parece verdadeiro para CSS Grid, no entanto, é adicionar o .wrapperdiv. O Grid trabalha duro para nos ajudar a separar a apresentação do conteúdo – ou seja, não precisamos adicionar elementos extras para fazer o trabalho de estilo ou “se comportar bem”. Por isso, pelo menos por hoje, encorajo-o a não adicionar ou alterar a marcação com o único propósito de um estilo mais limpo da CSS Grid.
Coda
Obrigado por vir nesta jornada CSS Grid comigo! Eu tenho usado e amado ao longo dos últimos dois meses, e espero que isso ajude você a entender e usá-lo no seu fim 💐
Para reiterar meus pontos da introdução, o CSS Grid é fácil de usar, mas difícil de aprender. É um paradigma mais intuitivo do que qualquer outra técnica de layout CSS, mas é completamente diferente de seus predecessores.
Tudo isso para dizer: pegue o Grid tão lentamente quanto for necessário. Não tente entender tudo apenas lendo as especificações. Configure exemplos simples, abra o web inspector (especialmente no Firefox!) E seja gentil com você mesmo.
Vai valer a pena.