Explorando os poderes implícitos de grade e posicionamento automático do CSS Grid

Ao trabalhar com CSS Grid, a primeira coisa a fazer é definir display: grid no elemento que queremos que se torne um contêiner de grade. Em seguida, definimos explicitamente a grade usando uma combinação de grid-template-columns, grid-template-rows e grid-template-areas. E a partir daí, o próximo passo é colocar os itens dentro da grade.

Esta é a abordagem clássica que deve ser usada e eu também recomendo. No entanto, existe outra abordagem para criar grades sem qualquer definição explícita. Chamamos isso de grade implícita.

"Explícito implícito? O que diabos está acontecendo aqui?”

Termos estranhos, certo? Manuel Matuzovic já tem uma boa explicação do que podemos chamar de "implícito" e "explícito" no CSS Grid, mas vamos direto ao que que o specification diz:

A grid-template-rows, grid-template-columns e grid-template-areas propriedades definem um número fixo de faixas que formam a grade explícita. Quando os itens de grade são posicionados fora desses limites, o contêiner de grade gera faixas de grade implícitas adicionando linhas de grade implícitas à grade. Essas linhas junto com o formulário de grade explícito a grade implícita.

Assim, em linguagem simples, o navegador gera automaticamente linhas e colunas extras caso algum elemento seja colocado fora da grade definida.

E quanto ao posicionamento automático?

Semelhante ao conceito de grade implícita, colocação automática é a capacidade do navegador de colocar automaticamente os itens dentro da grade. Nem sempre precisamos dar a posição de cada item.

Através de diferentes casos de uso, veremos como esses recursos podem nos ajudar a criar grades complexas e dinâmicas com poucas linhas de código.

Barra lateral dinâmica

Aqui, temos três layouts diferentes, mas temos apenas uma configuração de grade que funciona para todos eles.

main {
  display: grid;
  grid-template-columns: 1fr;
}

Apenas uma coluna está ocupando todo o espaço livre. Esta é a nossa grade “explícita”. Está configurado para caber um item de grade no main recipiente de grade. Isso é tudo. Uma coluna e uma linha:

Mas e se decidíssemos colocar outro elemento lá, digamos um aside (nossa barra lateral dinâmica). Como está atualmente (e explicitamente) definido, nossa grade terá que se ajustar automaticamente para encontrar um lugar para esse elemento. E se não fizermos mais nada com nosso CSS, aqui está o que o DevTools nos diz que está acontecendo.

Podemos mover o <aside> para uma coluna ao lado <section>:

aside {
  grid-column-start: 2;
}

E aqui está o que o DevTools nos diz agora:

Colocamos nosso elemento na segunda coluna, mas... não temos uma segunda coluna. Estranho, certo? Nunca declaramos uma segunda coluna no <main> grid container, mas o navegador criou um para nós! Esta é a parte principal da especificação que analisamos:

Quando os itens de grade são posicionados fora desses limites, o contêiner de grade gera faixas de grade implícitas adicionando linhas de grade implícitas à grade.

Este poderoso recurso nos permite ter layouts dinâmicos. Se tivermos apenas o <section> elemento, tudo o que temos é uma coluna. Mas se adicionarmos um <aside> elemento à mistura, uma coluna extra é criada para contê-lo.

Poderíamos colocar o <aside> antes de o <section> em vez disso:

aside {
  grid-column-end: -2;
} 

Isso cria a coluna implícita no início da grade, diferente do código anterior que coloca a coluna implícita no final.

Podemos fazer a mesma coisa mais facilmente usando o grid-auto-flow propriedade para definir todas e quaisquer faixas implícitas para fluir em um column direção:

Agora não há necessidade de especificar grid-column-start colocar o <aside> elemento à direita do <section>! Na verdade, qualquer outro item de grade que decidirmos lançar a qualquer momento agora fluirá em uma direção de coluna, cada um colocado em suas próprias faixas de grade implícitas. Perfeito para situações em que o número de itens na grade não é conhecido com antecedência!

Dito isso, ainda precisamos grid-column-end se quisermos colocá-lo em uma coluna à esquerda dele porque, caso contrário, o <aside> ocupará a coluna explícita que, por sua vez, empurra o <section> fora da grade explícita e força-a a pegar a coluna implícita.

Eu sei eu sei. Isso é um pouco complicado. Aqui está outro exemplo que podemos usar para entender melhor essa pequena peculiaridade:

No primeiro exemplo, não especificamos nenhum canal. Nesse caso, o navegador colocará primeiro o <aside> elemento na coluna explícita, pois vem primeiro no DOM. o <section>, enquanto isso, é colocado automaticamente na coluna da grade que o navegador cria automaticamente (ou implicitamente) para nós.

No segundo exemplo, definimos o <aside> elemento fora da grade explícita:

aside {
  grid-column-end: -2;
}

Agora não importa isso <aside> vem primeiro no HTML. Ao reatribuir <aside> em outro lugar, fizemos o <section> elemento disponível para pegar a coluna explícita.

Grade de imagem

Vamos tentar algo diferente com uma grade de imagens onde temos uma imagem grande e algumas miniaturas ao lado dela (ou abaixo dela).

Temos duas configurações de grade. Mas adivinhem? Eu não estou definindo nenhuma grade! Tudo que estou fazendo é isso:

.grid img:first-child {
  grid-area: span 3 / span 3;
}

É surpreendente que só precisemos de uma linha de código para fazer algo assim, então vamos dissecar o que está acontecendo e você verá que é mais fácil do que você imagina. Em primeiro lugar, grid-area é uma propriedade abreviada que combina as seguintes propriedades em uma única declaração:

• grid-row-start
• grid-row-end
• grid-column-start
• grid-column-end

Espere! Não é grid-area a propriedade que usamos para definir áreas nomeadas em vez de onde os elementos começam e terminam na grade?

Sim, mas também faz mais. Poderíamos escrever muito mais sobre grid-area, mas neste caso específico:

.grid img:first-child {
  grid-area: span 3 / span 3;
}

/* ...is equivalent to: */
.grid img:first-child {
  grid-row-start: span 3;
  grid-column-start: span 3;
  grid-row-end: auto;
  grid-column-end: auto;
}

Podemos ver a mesma coisa ao abrir o DevTools para expandir a versão abreviada:

Isso significa que o primeiro elemento de imagem na grade precisa abranger três colunas e três filas. Mas como não definimos nenhuma coluna ou linha, o navegador faz isso por nós.

Colocamos essencialmente a primeira imagem no HTML para ocupar uma grade de 3⨉3. Isso significa que quaisquer outras imagens serão colocadas automaticamente nessas mesmas três colunas sem a necessidade de especificar nada de novo.

Para resumir, dissemos ao navegador que a primeira imagem precisa ocupar o espaço de três colunas e três linhas que nunca definimos explicitamente ao configurar o contêiner de grade. O navegador configurou essas colunas e linhas para nós. Como resultado, as imagens restantes no HTML fluem diretamente para o lugar usando as mesmas três colunas e linhas. E como a primeira imagem ocupa todas as três colunas da primeira linha, as imagens restantes fluem para linhas adicionais, cada uma contendo três colunas, onde cada imagem ocupa uma única coluna.

Tudo isso a partir de uma linha de CSS! Esse é o poder da grade “implícita” e do posicionamento automático.

Para a segunda configuração de grade nessa demonstração, tudo o que fiz foi alterar a direção automática do fluxo usando grid-auto-flow: column da mesma forma que fizemos anteriormente ao colocar um <aside> elemento ao lado de <section>. Isso força o navegador a criar um quarto coluna que ele pode usar para colocar as imagens restantes. E como temos três linhas, as imagens restantes são colocadas dentro da mesma coluna vertical.

Precisamos adicionar algumas propriedades às imagens para garantir que elas se encaixem bem dentro da grade sem nenhum estouro:

.grid {
  display: grid;
  grid-gap: 10px;
}

/* for the second grid configuration */
.horizontal {
  grid-auto-flow: column;
}

/* The large 3⨉3 image */
.grid img:first-child {
  grid-area: span 3 / span 3;
}

/* Help prevent stretched or distorted images */
img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

E, claro, podemos atualizar facilmente a grade para considerar mais imagens ajustando um valor. Isso seria o 3 nos estilos para a imagem grande. Temos isso:

.grid img:first-child {
  grid-area: span 3 / span 3;
}

Mas poderíamos adicionar uma quarta coluna simplesmente alterando-a para 4 em vez de:

.grid img:first-child {
  grid-area: span 4 / span 4;
}

Melhor ainda: vamos configurar isso como uma propriedade personalizada para tornar as coisas ainda mais fáceis de atualizar.

Layouts dinâmicos

O primeiro caso de uso com a barra lateral foi nosso primeiro layout dinâmico. Agora vamos abordar layouts mais complexos onde o número de elementos ditará a configuração da grade.

Neste exemplo, podemos ter de um a quatro elementos onde a grade se ajusta de maneira que se ajuste bem ao número de elementos sem deixar lacunas estranhas ou espaços ausentes.

Quando temos um elemento, não fazemos nada. O elemento se estenderá para preencher a única linha e coluna criadas automaticamente pela grade.

Bit quando adicionamos o segundo elemento, criamos outra coluna (implícita) usando grid-column-start: 2.

Quando adicionamos um terceiro elemento, ele deve ocupar a largura de duas colunas - é por isso que usamos grid-column-start: span 2, mas apenas se for o :last-child porque se (e quando) adicionarmos um quarto elemento, esse deve ocupar apenas uma única coluna.

Somando isso, temos quatro configurações de grade com apenas duas declarações e a magia da grade implícita:

.grid {
  display: grid;
}
.grid :nth-child(2) {
  grid-column-start: 2;
}
.grid :nth-child(3):last-child {
  grid-column-start: span 2;
}

Vamos tentar outro:

Não estamos fazendo nada para o primeiro e segundo casos em que temos apenas um ou dois elementos. Quando adicionamos um terceiro elemento, porém, informamos ao navegador que - desde que seja o :last-child — deve abranger duas colunas. Quando adicionamos um quarto elemento, informamos ao navegador que o elemento precisa ser colocado na segunda coluna.

.grid {
  display: grid;
}
.grid :nth-child(3):last-child {
  grid-column-start: span 2;
}
.grid :nth-child(4) {
  grid-column-start: 2;
}

Você está começando a entender o truque? Damos instruções específicas ao navegador com base no número de elementos (usando :nth-child) e, às vezes, uma instrução pode alterar completamente o layout.

Cabe ressaltar que o dimensionamento não será o mesmo quando trabalhamos com conteúdos diferentes:

Como não definimos nenhum tamanho para nossos itens, o navegador os dimensiona automaticamente para nós com base em seu conteúdo e podemos acabar com tamanhos diferentes do que acabamos de ver. Para superar isso, temos que explicitamente especifique que todas as colunas e linhas tenham o mesmo tamanho:

grid-auto-rows: 1fr;
grid-auto-columns: 1fr;

Ei, ainda não brincamos com essas propriedades! grid-auto-rows e grid-auto-columns defina o tamanho de linhas e colunas implícitas, respectivamente, em um contêiner de grade. Ou, como a especificação explica isso:

A grid-auto-columns e grid-auto-rows propriedades especificam o tamanho das faixas não atribuídas a um tamanho por grid-template-rows or grid-template-columns.

Aqui está outro exemplo onde podemos ir até seis elementos. Desta vez vou deixar você dissecar o código. Não se preocupe, os seletores podem parecer complexos, mas a lógica é bem direta.

Mesmo com seis elementos, precisávamos apenas de duas declarações. Imagine todos os layouts complexos e dinâmicos que podemos alcançar com algumas linhas de código!

O que está acontecendo com isso grid-auto-rows e por que leva três valores? Estamos definindo três linhas?

Não, não estamos definindo três linhas. Mas nós e guarante que os mesmos estão definindo três valores como um padrão para nossas linhas implícitas. A lógica é a seguinte:

• Se tivermos uma linha, ela será dimensionada com o primeiro valor.
• Se tivermos duas linhas, a primeira recebe o primeiro valor e a segunda o segundo valor.
• Se tivermos três linhas, os três valores serão usados.
• Se tivermos quatro linhas (e aqui vem a parte interessante), usamos os três valores para as três primeiras linhas e reutilizamos o primeiro valor novamente para a quarta linha. Por isso é um tipo de padrão que repetimos para dimensionar todas as linhas implícitas.
• Se tivermos 100 linhas, elas serão dimensionadas três por três para ter 2fr 2fr 1fr 2fr 2fr 1fr 2fr 2fr 1fr, etc.

Diferentemente dos grid-template-rows que define o número de linhas e seus tamanhos, grid-auto-rows apenas dimensiona a linha que pode ser criada ao longo do caminho.

Se voltarmos ao nosso exemplo, a lógica é ter tamanho igual quando duas linhas são criadas (vamos usar o 2fr 2fr), mas se uma terceira linha for criada, nós a tornamos um pouco menor.

Padrões de grade

Para este último, vamos falar sobre padrões. Você provavelmente já viu esses layouts de duas colunas em que uma coluna é mais larga que a outra e cada linha alterna o posicionamento dessas colunas.

Esse layout de classificação pode ser difícil de executar sem saber exatamente com quanto conteúdo estamos lidando, mas os poderes implícitos de autoposicionamento do CSS Grid o tornam relativamente fácil.

Dê uma olhada no código. Pode parecer complexo, mas vamos detalhar porque acaba sendo bem direto.

A primeira coisa a fazer é identificar o padrão. Pergunte a si mesmo: “Depois de quantos elementos o padrão deve se repetir?” Neste caso é após cada quatro elementos. Então, vamos usar apenas quatro elementos por enquanto:

Agora, vamos definir a grade e configurar o padrão geral usando o :nth-child seletor para alternar entre os elementos:

.grid {
  display: grid;
  grid-auto-columns: 1fr; /* all the columns are equal */
  grid-auto-rows: 100px; /* all the rows equal to 100px */
}
.grid :nth-child(4n + 1) { /* ?? */ }
.grid :nth-child(4n + 2) { /* ?? */ }
.grid :nth-child(4n + 3) { /* ?? */ }
.grid :nth-child(4n + 4) { /* ?? */ }

Dissemos que nosso padrão se repete a cada quatro elementos, então usaremos logicamente 4n + x onde x varia de 1 a 4. É um pouco mais fácil explicar o padrão desta forma:

4(0) + 1 = 1 = 1st element /* we start with n = 0 */
4(0) + 2 = 2 = 2nd element
4(0) + 3 = 3 = 3rd element
4(0) + 4 = 4 = 4th element
4(1) + 1 = 5 = 5th element /* our pattern repeat here at n = 1 */
4(1) + 2 = 6 = 6th element
4(1) + 3 = 7 = 7th element
4(1) + 4 = 8 = 8th element
4(2) + 1 = 9 = 9th element /* our pattern repeat again here at n = 2 */
etc.

Perfeito, certo? Temos quatro elementos e repetimos o padrão no quinto elemento, no nono elemento e assim por diante.

Aqueles :nth-child seletores podem ser complicados! Chris tem um super útil explicação de como tudo funciona, incluindo receitas para criar padrões diferentes.

Agora configuramos cada elemento para que:

1. O primeiro elemento precisa ter duas colunas e começar na coluna um (grid-column: 1/span 2).
2. O segundo elemento é colocado na terceira coluna (grid-column-start: 3).
3. O terceiro elemento é colocado na primeira coluna: (grid-column-start: 1).
4. O quarto elemento leva duas colunas e começa na segunda coluna: (grid-column: 2/span 2).

Aqui está em CSS:

.grid {
  display: grid;
  grid-auto-columns: 1fr; /* all the columns are equal */
  grid-auto-rows: 100px; /* all the rows are equal to 100px */
}
.grid :nth-child(4n + 1) { grid-column: 1/span 2; }
.grid :nth-child(4n + 2) { grid-column-start: 3; }
.grid :nth-child(4n + 3) { grid-column-start: 1; }
.grid :nth-child(4n + 4) { grid-column: 2/span 2; }

Poderíamos parar por aqui e terminar… mas podemos fazer melhor! Especificamente, podemos remover algumas declarações e confiar nos poderes de posicionamento automático da grade para fazer o trabalho por nós. Esta é a parte mais difícil de grocar e requer muita prática para poder identificar o que pode ser removido.

A primeira coisa que podemos fazer é atualizar grid-column: 1 /span 2 e use apenas grid-column: span 2 já que, por padrão, o navegador colocará o primeiro item na primeira coluna. Também podemos remover isso:

.grid :nth-child(4n + 3) { grid-column-start: 1; }

Ao colocar o primeiro, segundo e quarto itens, a grade coloca automaticamente o terceiro item no local correto. Isso significa que ficamos com isso:

.grid {
  display: grid;
  grid-auto-rows: 100px; /* all the rows are equal to 100px */
  grid-auto-columns: 1fr; /* all the columns are equal */
}
.grid :nth-child(4n + 1) { grid-column: span 2; }
.grid :nth-child(4n + 2) { grid-column-start: 2; }
.grid :nth-child(4n + 4) { grid-column: 2/span 2; }

Mas vamos lá podemos passear melhor! Também podemos remover isso:

.grid :nth-child(4n + 2) { grid-column-start: 2; }

Por quê? Se colocarmos o quarto elemento na segunda coluna enquanto permitimos que ele ocupe duas colunas completas, estamos forçando a grade a criar uma terceira coluna implícita, dando-nos um total de três colunas sem informar explicitamente. O quarto elemento não pode entrar na primeira linha, pois o primeiro item também ocupa duas colunas, então ele flui para a próxima linha. Essa configuração nos deixa com uma coluna vazia na primeira linha e uma vazia na segunda linha.

Acho que você sabe o final da história. O navegador colocará automaticamente o segundo e o terceiro itens nesses locais vazios. Assim nosso código fica ainda mais simples:

.grid {
  display: grid;
  grid-auto-columns: 1fr; /* all the columns are equal */
  grid-auto-rows: 100px; /* all the rows are equal to 100px */
}
.grid :nth-child(4n + 1) { grid-column: span 2; }
.grid :nth-child(4n + 4) { grid-column: 2/span 2; }

Bastam cinco declarações para criar um padrão muito legal e muito flexível. A parte de otimização pode ser complicada, mas você se acostuma e ganha alguns truques com a prática.

Por que não usar grid-template-columns para definir colunas explícitas, pois sabemos o número de colunas?

Nós podemos fazer isso! Aqui está o código para isso:

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* all the columns are equal */
  grid-auto-rows: 100px; /* all the rows are equal to 100px */
}
.grid :nth-child(4n + 1),
.grid :nth-child(4n + 4) {
  grid-column: span 2;
}

Como você pode ver, o código é definitivamente mais intuitivo. Definimos três colunas de grade explícitas e informamos ao navegador que o primeiro e o quarto elementos precisam ter duas colunas. Eu recomendo esta abordagem! Mas o objetivo deste artigo é explorar novas ideias e truques que obtemos dos poderes implícitos e de posicionamento automático do CSS Grid.

A abordagem explícita é mais direta, enquanto uma grade implícita exige que você – desculpe o trocadilho – preencha as lacunas onde o CSS está fazendo trabalho adicional nos bastidores. No final, acredito que ter uma sólida compreensão de grades implícitas ajudará você a entender melhor o algoritmo CSS Grid. Afinal, não estamos aqui para estudar o que é óbvio – estamos aqui para explorar territórios selvagens!

Vamos tentar outro padrão, um pouco mais rápido desta vez:

Nosso padrão se repete a cada seis elementos. O terceiro e quarto elementos precisam ocupar duas fileiras completas. Se colocarmos o terceiro e o quarto elementos, parece que não precisamos tocar nos outros, então vamos tentar o seguinte:

.grid {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-rows: 100px;
}
.grid :nth-child(6n + 3) {
  grid-area: span 2/2; /* grid-row-start: span 2 && grid-column-start: 2 */
}
.grid :nth-child(6n + 4) {
  grid-area: span 2/1; /* grid-row-start: span 2 && grid-column-start: 1 */
}

Hum, não é bom. Precisamos colocar o segundo elemento na primeira coluna. Caso contrário, a grade o colocará automaticamente na segunda coluna.

.grid :nth-child(6n + 2) {
  grid-column: 1; /* grid-column-start: 1 */
}

Melhor, mas ainda há mais trabalho. Precisamos deslocar o terceiro elemento para o topo. É tentador tentar colocá-lo na primeira linha desta forma:

.grid :nth-child(6n + 3) {
  grid-area: 1/2/span 2; 
    /* Equivalent to:
       grid-row-start: 1;
       grid-row-end: span 2;
       grid-column-start: 2 
     */
}

Mas isso não funciona porque força todos os 6n + 3 elementos para serem colocados na mesma área, o que torna um layout confuso. A solução real é manter a definição inicial do terceiro elemento e adicionar grid-auto-flow: dense para preencher as lacunas. De MDN:

[O] algoritmo de empacotamento “denso” tenta preencher em buracos anteriores na grade, se itens menores surgirem mais tarde. Isso pode fazer com que os itens pareçam fora de ordem, ao fazê-lo preencher os buracos deixados por itens maiores. Se for omitido, um algoritmo “esparso” é usado, onde o algoritmo de posicionamento só se move “para frente” na grade ao colocar itens, nunca retrocedendo para preencher buracos. Isso garante que todos os itens colocados automaticamente apareçam “em ordem”, mesmo que isso deixe buracos que poderiam ter sido preenchidos por itens posteriores.

Eu sei que essa propriedade não é muito intuitiva, mas nunca a esqueça quando você enfrentar um problema de posicionamento. Antes de tentar configurações diferentes em vão, adicione-o, pois ele pode corrigir seu layout sem nenhum esforço adicional.

Por que nem sempre adiciona essa propriedade por padrão?

Não recomendo porque, em alguns casos, não queremos esse comportamento. Observe como a explicação do MDN menciona que faz com que os itens fluam “fora de ordem” para preencher os buracos deixados por itens maiores. A ordem visual geralmente é tão importante quanto a ordem da fonte, principalmente quando se trata de interfaces acessíveis e grid-auto-flow: dense às vezes pode causar uma incompatibilidade entre a ordem visual e de origem.

Nosso código final é então:

.grid {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: dense;
  grid-auto-rows: 100px;
}
.grid :nth-child(6n + 2) { grid-column: 1; }
.grid :nth-child(6n + 3) { grid-area: span 2/2; }
.grid :nth-child(6n + 4) { grid-row: span 2; }

Outro? Vamos lá!

Para este, não vou falar muito e, em vez disso, mostrarei uma ilustração do código que usei. Tente ver se você entende como cheguei a esse código:

Os itens em preto são colocados implicitamente na grade. Deve-se notar que podemos obter o mesmo layout de mais maneiras do que como cheguei lá. Você consegue descobrir isso também? Que tal usar grid-template-columns? Compartilhe seus trabalhos na seção de comentários.

Deixo-vos com um último padrão:

Eu faço tem uma solução para este, mas é a sua vez de praticar. Pegue tudo o que aprendemos e tente codificar isso sozinho e depois compare com a minha solução. Não se preocupe se você terminar com algo detalhado — o mais importante é encontrar uma solução funcional.

Quero mais?

Antes de terminarmos, quero compartilhar algumas perguntas do Stack Overflow relacionadas ao CSS Grid, nas quais entrei com respostas que usam muitas das técnicas que abordamos aqui juntos. É uma boa lista que mostra quantos casos de uso reais e situações do mundo real surgem onde essas coisas são úteis:

Resumindo

CSS Grid existe há anos, mas ainda existem muitos truques pouco conhecidos e usados ​​que não são amplamente discutidos. Os recursos implícitos de grade e posicionamento automático são dois deles!

E sim, isso pode ser desafiador! Levei muito tempo para entender a lógica por trás das grades implícitas e ainda luto com o posicionamento automático. Se você quiser gastar mais tempo pensando em grades explícitas e implícitas, aqui estão algumas explicações e exemplos adicionais que valem a pena conferir:

Da mesma forma, você pode querer ler sobre grid-auto-columns no CSS-Tricks Almanac porque Mojtaba Seyedi entra em grandes detalhes e inclui recursos visuais incrivelmente úteis para ajudar a explicar o comportamento.

Como eu disse quando começamos, os métodos que abordamos aqui não pretendem substituir as formas comuns que você já conhece para construir grades. Estou simplesmente explorando diferentes maneiras que podem ser úteis em alguns casos.