Ao observar as pessoas se familiarizando com o CSS Grid, notei alguns problemas que atraem as pessoas com mais frequência do que outros, ou apresentam mais desafios quando se trata de criar um layout. Esta breve série de artigos irá aprofundar esses problemas comuns e terá como objetivo fornecer uma melhor compreensão do Grid para que você possa antecipar problemas de layout e depurá-los mais facilmente quando eles ocorrerem.
Faixas implícitas acidentais
O maior problema com o qual as pessoas lutam é acidentalmente criar trilhas de grade extras, o que pode deixar um layout inteiro em desordem. Essas faixas extras são conhecidas como trilhas implícitas e são criadas colocando um item fora do limite da grade explícita . Para aproveitar ao máximo o Grid, é uma boa ideia entender os conceitos da grade explícita e implícita e o relacionamento entre eles.
A grade explícita
A grade explícita é definida usando as propriedades grid-template-rowse grid-template-columns(ou taquigrafia, grid-templatese preferir):
.grid {
display: grid;
grid-template-rows: repeat(4, 150px);
grid-template-columns: repeat(4, 1fr);
}Aqui estamos definindo uma grade com quatro linhas e quatro colunas, e podemos saber que nossa grade terá pelo menos quatro linhas e quatro colunas, não importa o quê. Mesmo se não tivermos nenhum filho da grade para colocar, para que a nossa grade esteja completamente vazia, ela ainda ocupará o espaço de quatro linhas e quatro colunas que definimos acima.
Se usássemos repeat(4, auto)para a grid-template-rowspropriedade, todas as linhas de grade teriam uma altura de auto– portanto, se não tivéssemos filhos de grade, as linhas ainda existiriam, elas cairiam até uma altura de zero sem qualquer conteúdo para preenchê-las. Se adicionássemos um espaçamento de linha (por exemplo row-gap: 40px), a altura combinada das lacunas entre as linhas formaria a altura de nossa grade – assim, sem qualquer conteúdo, poderia parecer uma margem extra grande ou valor de preenchimento em algum lugar que estava quebrando seu layout!
O que são faixas implícitas?
Faixas implícitas são faixas que são criadas apenas colocando itens. Esse comportamento no Grid é intencional e muito útil. Um exemplo é se você tem uma grade com quatro colunas que queremos preencher com um número indeterminado de itens (por exemplo, um feed de notícias. Se não soubermos o número de itens, não saberemos quantas linhas precisamos para Por padrão, os itens da grade são colocados na próxima célula da grade disponível Podemos simplesmente omitir a grid-template-rowspropriedade e permitir que o posicionamento automático da Grade crie o número correto de linhas para o nosso conteúdo.
(Nota: Eu estou supondo aqui que a grade está usando o padrão grid-auto-flow: row. Se você mudar isso, grid-auto-flow: columnentão as trilhas implícitas serão criadas no eixo da linha).
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
Podemos controlar o comportamento de faixas implícitas com grid-auto-rowse grid-auto-columns.
.grid {
display: grid;
grid-template-rows: repeat(4, 150px);
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 150px;
}O código acima, além de definir quatro faixas explícitas de coluna e linha, instrui o Grid que qualquer linha implícita criada deve ter uma altura fixa de 150px. Esta propriedade é opcional e, sem ela, as faixas implícitas terão um tamanho padrão de auto.
Colocar itens
Para colocar um item na grade que acabamos de criar, poderíamos fazer algo assim:
.item {
grid-column: 1 / 4;
grid-row: 3 / 5;
}Estamos usando linhas de início e fim para colocar o item da grade na parte inferior esquerda da nossa grade.
Isso não causará nenhum problema porque estamos explicitamente colocando itens pelo número da linha da grade. Sabemos que nossa grade tem quatro linhas e quatro colunas (portanto, cinco linhas de grade em qualquer direção), portanto, é improvável que acidentalmente usemos um número de linha mais alto e acidentalmente criemos trilhas implícitas.
Alternativamente, poderíamos usar a palavra-chave span no lugar de uma linha inicial ou final:
.item {
grid-column: 1 / 4;
grid-row: 3 / span 3;
}Eu gosto de usar spanpara colocação de grade – é sempre útil quando você sabe que um item precisa abranger um número definido de trilhas de grade, ao invés de terminar em uma linha específica – mas isso significa que você pode perder a linha de grade que você está colocando item em.
Aqui estamos usando spanno lugar da grid-row-endlinha. Se nós mudarmos o valor do span para 4 ao invés de 3, isso faria com que o item ocupasse mais faixas de linha do que as disponíveis – e whoops! Nós criamos uma pista implícita!
Eu vejo esse problema ocorrer com bastante freqüência em situações que exigem que os itens da grade se sobreponham uns aos outros. Isso ocorre porque o Grid coloca itens que não são colocados explicitamente na próxima célula da grade disponível e, se não houver uma célula da grade disponível, ela criará trilhas implícitas em vez de empilhar itens umas sobre as outras. Esse comportamento é muito útil, pois significa que nem sempre precisamos explicitamente colocar itens, mas esse é um caso em que não é particularmente útil para nós!
Um amigo meu estava usando o Grid para posicionar dois elementos, um em cima do outro, mas compensados por uma linha:
Este é o código que foi usado para criar o layout:
.grid {
grid-template-columns: repeat(3, 1fr);
}
.item:first-child {
grid-column: span 3;
grid-row: 1 / span 2;
}
.item:nth-child(2) {
grid-column: span 3;
grid-row: 2 / span 2;
}Em vez do layout desejado, obtemos isso:
O que aconteceu com o segundo item? Você pode identificar o problema aqui? Ambos os itens estão usando a palavra-chave span para o grid-columnvalor. O primeiro item será posicionado corretamente porque ele será colocado automaticamente na primeira célula disponível com um intervalo de 3. O segundo item não tem uma linha de início ou de término, portanto, o Grid precisa resolver isso, o que ele faz gerando faixas de coluna implícitas.
Se a grade tivesse quatro linhas explícitas, o item seria encerrado na próxima linha (que não seria o layout que queremos, mas talvez fosse menos desconcertante!), Mas como não há linhas suficientes disponíveis, o Grid resolve isso colocando o item começando na linha 5 no eixo da coluna e gerando quatro trilhas implícitas. Como não estamos usando grid-auto-columnspara definir um tamanho para nossas trilhas implícitas, elas terão um tamanho padrão de auto. E se o item da grade não tiver conteúdo, essas faixas serão reduzidas a uma largura de 0, tornando nosso item invisível. Nosso item de grade contém um título, portanto, essas trilhas implícitas serão dimensionadas automaticamente para acomodar isso.
Se tivéssemos um column-gapvalor de, digamos, 20pxveríamos a largura de duas lacunas de coluna serem adicionadas à nossa grade, embora as faixas fossem zero.
Jogue com a demonstração abaixo para explorar diferentes formas de “quebrar” o layout:
Evitando que nossos layouts quebrem
Então, como podemos evitar problemas com trilhas implícitas? Uma maneira é entender como a Grid está calculando nosso layout nos bastidores.
Entendendo o Algoritmo de Posicionamento de Item de Grade
Isso parece mais assustador do que realmente é! O Algoritmo de Posicionamento de Item da Grade é a ordem na qual o posicionamento dos itens da grade é resolvido. Itens de grade que são explicitamente posicionados primeiro, seguidos pelos itens com uma posição de linha definida, determinam as colunas na grade implícita e colocam quaisquer itens posicionados automaticamente (itens sem uma posição explícita) de acordo. Isto está assumindo que o grid-auto-flowvalor da propriedade é row(o padrão). Manter isso em mente pode ajudá-lo a entender por que você pode ter trilhas implícitas sendo criadas em um eixo e não no outro, se isso for contrário às suas expectativas.
Eu também tenho algumas dicas de como você colocar itens que podem ajudar a evitar itens acidentalmente empurrados para fora da grade explícita …
Nomeando linhas de grade
Uma maneira que me ajuda a ser mais intencional com meu posicionamento de grade é nomear linhas de grade. Digamos que o item que queremos colocar é uma imagem. Nós poderíamos fazer isso:
.grid {
display: grid;
grid-template-rows:
repeat(2, 150px) [image-start] repeat(2, 150px)
[image-end]
; grid-template-columns: [image-start] repeat(3, 1fr) [image-end] 1fr; grid-auto-rows: 150px; }
Usar -start e -end como um sufixo para nossos nomes de linha cria uma área de grade, o que torna a colocação de nossa imagem muito simples:
.image {
grid-area: image;
}Você também pode usar a grid-template-areaspropriedade para fazer algo semelhante, o que parece mais intuitivo para muitas pessoas – lembre-se de que não funcionará se você precisar de itens de grade sobrepostos.
Colocação por linha final
Às vezes, colocar pelo número da linha final (em oposição ao número da linha inicial) pode ajudar a evitar o problema de criar trilhas implícitas acidentais. Tomando nosso exemplo acima, talvez saibamos que queremos que a imagem abranja três trilhas de grade, de modo que estamos usando a palavra-chave spancomo o grid-column-endvalor. Mas pode ser melhor usar o span como grid-column-startvalor e colocá-lo explicitamente na linha final:
.image {
/* The image will end at line 4 on the column axis: */
grid-column: span 3 / 4;
}Isso pode ser útil se tivermos uma grade muito grande. Imagine que a nossa grade tem 20 colunas em vez de apenas quatro, podemos saber que ela precisa ser colocada a uma linha do final, mas não queremos calcular o que a linha de partida deve ser a cada vez – isso seria chato e propenso a erros!
Linhas de grade negativas
Uma técnica que eu acho muito útil (e algo que já escrevi antes ), está usando números de linha negativos para colocar itens de grade. O número da linha negativa representa as linhas da sua grade ao contrário. Portanto, em uma grade de quatro trilhas (que teria cinco linhas de grade), a linha -1 é o equivalente à linha 5, a linha -2 é o equivalente à linha 4 e assim por diante.
Novamente, isso pode ser muito útil quando se trabalha com uma grade grande. Se sabemos e item precisa se alinhar ao final da grade, então podemos simplesmente usar a linha de grade -1, em vez de ter que lembrar que a última linha é a linha 21, por exemplo.
Depurando com ferramentas de desenvolvimento
Eu recomendo completamente as ferramentas de desenvolvimento do Firefox para inspecionar e depurar problemas com o CSS Grid. O inspetor de gradepermite que você ative números de linha, assim, mesmo que os tamanhos de suas trilhas implícitas tenham desmoronado até zero, você ainda poderá ver que eles foram criados. (O inspetor também mostra os números de linha negativos – muito útil!)
Conclusão
Espero que este artigo vá de alguma forma desmistificar faixas explícitas e explícitas ao trabalhar com o CSS Grid e lhe dê algum conhecimento valioso para ajudá-lo a depurar layouts quebrados. Procure mais artigos na série Debugging CSS Grid em breve.