Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS Grid Layout

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

by
Read Time:3 minsLanguages:
This post is part of a series called Understanding the CSS Grid Layout Module.
Understanding the CSS Grid “Auto-Placement Algorithm”
How to Use Implicit Track Sizing on Your CSS Grid

Portuguese (Português) translation by Erick Patrick (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:

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:

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

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

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.

Devemos definir nossas quatro áreas de grade assim:

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.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.