Dica Rápida: Nomeando as Trilhas de Grade do CSS, Por Via das Dúvidas

() translation by (you can also view the original English article)

Em qualquer Grade do CSS, cada trilha possui um índice que podemos referenciar ao posicionar itens da grade. Contudo, tamém podemos nomear essas trilhas de grade, facilitando o trabalho e a manutenção de layouts em grade. Vejamos!

Grade Está Chegando

A resposta mais comum a qualquer tutorial sobre Grade é "quando podemos usar isso?" e é justa. O fato é: a Grade está chegando e logo.

"Grade do CSS será suportada, por padrão, pelo Chrome e Firefox em Março de 2017" – Eric Meyer

Se ainda não leu sobre, agora é hora!

Números de Linha de Grade

Ao declaramos uma grade, cada trilha recebe um índice:

Nota: A menos que o tenhamos direction: rtl, esses números começam do topo esquerdo da grade e vão até a parte inferior direita.

Referenciamos esses números para posicionar itens da grade:

1	.item {
2	grid-column: 2;
3	grid-row: 3;
4	}

Nesse exemplo, o elemento .item é posicionado começando na coluna 2 e na linha 3.

Nomes de Trilha de Grade Explícitos

Com grades mais complexas, é fácil perceber que referenciar tudo por números pode ser bem confuso. Por isso, o módulo de Grade permite-nos nomear explícitamente nossas trilhas ao declarar as colunas e linhas da grade.

Usemos um exemplo como os que usamos pela série. Eis nossa declaração de grade 3x3:

.grid-1 {
  display: grid;
  grid-template-columns: 100px auto 100px;
  grid-template-rows: 60px 130px 50px;
  grid-gap: 20px;
}

Agora podemos envolver os valores das colunas e linhas com nomes de trlha (seja o que for), usando colchetes:

.grid-1 {
  display: grid;
  grid-template-columns: [start] 100px [centre-start] auto [last-column-start] 100px [finish];
  grid-template-rows: [header-start] 60px [main-start] 130px [main-end] 50px [row-end];
  grid-gap: 20px;
}

Agora, podemos usar nomes, ao invés dos números:

1	.item {
2	grid-column: centre-start;
3	grid-row: header-start;
4	}

Algumas observações:

Esses nomes podem ser qualquer coisa que quisermos, então é ideal pensar em algo que seja fácil de lembrar e identificar a área da grade.
Os números de trilha continuam funcionando, logo ainda podemos usá-los.
Podemos declarar vários nomes para uma trilha, por exemplo: [main-end footer-start row-5] etc.
Mesmo que nomeemos as trilhas de grade, não precisamos usá-los, mas, por "via das dúvidas", passe a usá-los.

Nomes de Trilha de Grade Implícitos

Ao fazer coisas deliberadamente, como nomear trilhas de grade, dizemos que isso é explícito. Quando algo é sugestivo, mas não é dito diretamente, dizemos que está implícito. Cobrimos nomeação explícita de trilhas de grade, mas há vezes onde trilhas receber nomes implícitos.

Talvez lembre de um tutorial anterior que é possível definir áreas de grade.

CSS

Layout em Grade do CSS: Usando Áreas de Grade

Ian Yates

Devemos definir nossas quatro áreas de grade assim:

.grid-1 {
    /* ..existing styles */
     
    grid-template-areas:    "header header header"
                            "main main sidebar"
                            "footer footer footer";
}

E com isso, temos o resultado a seguir:

Nomeando de header uma área de grade, automaticamente nomeia as quatro trilhas que a circunda. As trilhas de linha ao redor dela serão header-start e header-end, assim como as trilhas de colunas serão header-start e header-end. O mesmo aplica-se a outras áreas, que são dados nomes como main-start, main-end, sidebar-start e por aí vai.

Nota: por outro lado, explicitamente dando nome a trilhas nesse formato (header-start e header-end), será criada uma área de grade chamada de header.

Podemos usar esses nomes de trilhas como antes, para posicionar itens. E, de novo, elas existem além dos nomes que definirmos por conta própria, sem contar os índices.

Fim da Linha

Essa é a dica rápida! Lembre-se: crie o hábito de nomear as linhas e áreas para uma administração e manutenção da grade.