Nomeação de Grade CSS

Quando você aprender a usar o layout da grade, poderá começar colocando elementos na grade pelos números das linhas. Nesse caso, é necessário monitorar onde determinadas linhas vão na grade e lembre-se de que a sequência de seus números será revertida se o site for exibido para idiomas escritos da direita para a esquerda.

Com base nesse sistema de linhas, técnicas funcionam para possibilitar o nome de linhas e até áreas de grade. O uso dessas técnicas permite colocar itens por nome e não por número. Neste artigo, examinarei detalhadamente as várias maneiras de nomear linhas e áreas nos layouts CSS Grid , bem como alguns recursos interessantes que eles criam.

---

Do tradutor:
Um artigo há dois anos (2017), mas aborda a importante mecânica do CSS Grid funcional e, portanto, parece útil e relevante hoje.

Nomeação de linha

Vamos começar nomeando as linhas de grade. No exemplo abaixo, há uma grade com seis trilhas de coluna explícitas e uma trilha de linha explícita. Os elementos são colocados na grade usando números de linha.

.grid { display: grid; grid-gap: 20px; grid-template-rows: 20vh ; grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr; } .header { grid-row: 1; grid-column: 1 / -1; } .sidebar { grid-row: 2; grid-column: 1 / 3; } .content { grid-row: 2; grid-column: 3 / -1; } 

Se necessário, os nomes das linhas podem ser especificados entre colchetes na lista de trilhas. É importante lembrar aqui que você nomeia a linha, não a faixa que a segue. Depois de nomear as linhas, você pode usar seus nomes em vez de números ao posicionar elementos na grade.

 .grid { display: grid; grid-gap: 20px; grid-template-rows: [header-start] 20vh [header-end] ; grid-template-columns: [sidebar-start] 1fr 2fr [sidebar-end] 1fr 2fr 1fr 2fr; } .header { grid-row: header-start; grid-column: 1 / -1; } .sidebar { grid-row: 2; grid-column: sidebar-start / sidebar-end; } 

O nome pode ser outra coisa que não a palavra-chave span . Por razões que você aprenderá mais adiante neste artigo, nomear com o sufixo -start para linhas -start (não importa se é uma linha ou linha de coluna) e -end para -end é uma boa prática. O resultado deve ser o main-start main-end ou o sidebar-start sidebar-end .

Muitas vezes, a linha final de uma parte da grade e a linha inicial da outra parte coincidem, mas isso não é um problema, pois as linhas podem ter vários nomes. Você pode especificar linhas de vários nomes, adicionando-as através de um espaço entre colchetes.

 .grid { display: grid; grid-gap: 20px; grid-template-rows: [header-start] 20vh [header-end] ; grid-template-columns: [full-start sidebar-start] 1fr 2fr [sidebar-end main-start] 1fr 2fr 1fr 2fr [main-end full-end]; } .header { grid-row: header-start; grid-column: full-start / full-end; } .sidebar { grid-row: 2; grid-column: sidebar-start / sidebar-end; } .content { grid-row: 2; grid-column: main-start / main-end; } 

Este exemplo demonstra que você não precisa nomear cada linha de grade individual e que os números de linha que podem ser usados ​​além dos nomes estão sempre disponíveis.

Codepen 1. Nomeação de linha

Linhas com o mesmo nome.

Vimos como as linhas podem ter vários nomes, mas também existem situações em que várias linhas têm o mesmo nome. Isso acontece se você usar a função repeat() e incluir linhas nomeadas na lista de faixas. O exemplo a seguir cria seis linhas nomeadas, denominadas alternadamente col-a-start e col-b-start .

 .grid { display: grid; grid-gap: 20px; grid-template-columns: repeat(3, [col-a-start] 1fr [col-b-start] 2fr); } 

Se você especificar col-a-start ao posicionar um elemento, ele será colocado na primeira linha encontrada com o nome col-a-start (que no exemplo considerado seria a primeira linha da grade). Pelo mesmo princípio, se você especificar col-b-start ao posicionar um elemento, ele será colocado na segunda linha de grade.

Se você precisar posicionar nas linhas subsequentes, adicione um número após o nome para indicar em qual linha da linha com o mesmo nome o item deve ser colocado

 .box3 { grid-row: 2; grid-column: col-a-start 2 / col-b-start 3; } 

Codepen 2. Linhas com o mesmo nome.

A especificação descreve esse comportamento como "criando um conjunto nomeado de linhas de grade".

Salvando nomes de linhas ao reconstruir uma grade adaptável

Use os números de linha ou seus nomes, você decide. Como regra, as linhas podem ser úteis em situações em que você deseja alterar a estrutura da grade como parte de uma consulta de mídia. Em vez de rastrear em qual linha você coloca elementos em diferentes pontos de controle, será possível operar com linhas nomeadas seqüencialmente.

No exemplo simples a seguir, defino colunas de grade para uma tela estreita e redefino-as com uma largura de 550px.

 .grid { display: grid; grid-gap: 20px; grid-template-rows: [header-start] 20vh [header-end]; grid-template-columns: [full-start ] 10px [sidebar-start main-start] 1fr [main-end sidebar-end] 10px [full-end]; } @media (min-width: 550px) { .grid { grid-template-columns: [full-start sidebar-start] 1fr 2fr [sidebar-end main-start] 1fr 2fr 1fr 2fr [main-end full-end]; } } 

Codepen 3. Nomeando coisas: redefinindo a posição das linhas nomeadas

Regiões nomeadas

Antes disso, considerávamos apenas linhas nomeadas, mas existe outra maneira. Podemos nomear áreas de grade.

Uma região da grade é uma região retangular que consiste em uma ou mais células da grade. A área é definida por quatro linhas de grade, indicando as linhas inicial e final de colunas e linhas.


Nomeamos as áreas da grade usando a propriedade grid-template-areas . Esta propriedade descreve o layout na forma de uma tabela ASCII e é um conjunto de linhas, cada uma das quais descreve uma trilha de linha separada da grade.

 .grid { display: grid; grid-template-columns: repeat(3, 1fr 2fr) ; grid-template-areas: "head head head head head head" "side side main main main main" "foot foot foot foot foot foot"; } 

Os nomes que usamos nas linhas da propriedade grid-template-areas são atribuídos aos filhos diretos da grade usando a propriedade grid-area . O valor dessa propriedade, quando usado para nomear, é o chamado identificador de usuário , portanto, não precisa ser colocado entre aspas

 .header { grid-area: head; } .sidebar { grid-area: side; } .content { grid-area: main; } .footer { grid-area: foot; } 

Para fazer com que a área cubra mais de uma célula ao descrever a estrutura da grade usando a propriedade grid-template-areas , é necessário registrar novamente o identificador várias vezes ao longo de uma linha ou coluna. A área criada deve ser um retângulo, áreas em forma de L e T não são permitidas. Você também pode criar apenas uma área retangular para cada nome - áreas desconectadas não são permitidas. A especificação observa que:

“Áreas não retangulares ou desconectadas podem ser permitidas em versões futuras deste módulo”
- Propriedade grade-modelo-áreas

Ao descrever uma grade, você precisa cuidar de sua apresentação completa; caso contrário, todo o anúncio será descartado como inválido. Isso significa que cada célula da grade deve ser preenchida.

 grid-template-areas: "head head head head head head" "side side main main main main" "foot foot foot foot foot foot"; } 

Como você pode deixar algumas células na marcação vazias, a especificação define um símbolo de ponto . ou uma sequência de pontos sem espaços entre eles .... como um marcador de uma célula vazia

 grid-template-areas: "head head head head head head" "side side main main main main" "....... ....... foot foot foot foot"; } 

Codepen 4. Regiões nomeadas

Se você ainda não baixou o Firefox para aproveitar todos os recursos mais recentes do Firefox DevTools Grid Inspector, recomendo fazer isso ao trabalhar com áreas nomeadas


Demonstração de áreas nomeadas no "Grid Inspector" do navegador Firefox ( Abrir original )

Áreas de formulário de linhas nomeadas

Agora chegamos à parte interessante de todo esse feriado de nomeação. Você deve se lembrar que, quando analisamos as linhas nomeadas, sugeri o uso de um contrato de final de linha que defina o início da área usando -start , e o final da área usando -end . A razão para isso é que, se você nomear as linhas dessa maneira, terá uma área de grade com esse nome e poderá inserir um elemento nele, definindo esse nome por meio da propriedade da grid-area .

No exemplo a seguir, para linhas e colunas, nomeio as linhas panel-start e panel-end . Isso me dará uma área nomeada chamada panel. Se eu defini-lo como o valor da propriedade da grid-area para um elemento na página, isso colocará o elemento na área definida por essas linhas

 .grid { display: grid; grid-gap: 20px; grid-template-columns: 1fr [panel-start] 2fr 1fr 2fr 1fr [panel-end] 2fr; grid-template-rows: 10vh [panel-start] minmax(200px, auto) 10vh [panel-end]; grid-template-areas: "head head head head head head" "side side main main main main" ".... .... foot foot foot foot"; } .panel { grid-area: panel; } 

Codepen 5. Áreas formadas a partir de linhas nomeadas

Linhas são formadas a partir de áreas nomeadas

Também podemos fazer o oposto do que é mostrado acima, usando linhas criadas a partir de áreas nomeadas. Cada área cria quatro linhas nomeadas usando a mesma convenção de sufixo que -start e -end . Se houver uma área nomeada chamada main , sua linha de início e fim e as linhas de coluna serão denominadas main-start e main-end . Essas linhas nomeadas podem ser usadas para posicionar um elemento.

No exemplo a seguir, posiciono o painel usando os nomes dessas linhas geradas automaticamente:

 .grid { display: grid; grid-template-areas: "head head head head head head" "side side main main main main" ".... .... foot foot foot foot"; } .panel { grid-column: main-start / main-end; grid-row: head-start / foot-end; } 

Codepen 6. Linhas formam áreas de áreas nomeadas

Nomes de linhas equivalentes ao nome da região

Além das linhas com os -end -start e -end , são criadas linhas para as faces de qualquer região da grade com o nome dessa região. Portanto, se houver uma área main , você poderá usar o identificador main como um valor para as propriedades grid-row-start ou grid-column-start , e o conteúdo será localizado desde o início desta área. Se você usou esse valor para a propriedade grid-row-end ou grid-column-end , a linha final desta área é selecionada. No exemplo abaixo, estico o elemento .panel do início do main para o final do main para colunas e do início do main para o final do foot para as linhas

 .panel { grid-column: main; grid-row: main / foot ; } 

Codepen 7. Nomes de linhas equivalentes ao nome da região

Explicação da propriedade da área de grade

É útil saber algo sobre a propriedade da grid-area . Essencialmente, o que fazemos ao usar grid-area com um identificador como main é como descrevemos todas as quatro linhas da área. Valores válidos para a propriedade da grid-area também são números de linha.

 .main { grid-area: 2 / 1 / 4 / 3; } 

Isso tem o mesmo efeito que a entrada:

 .main { grid-row-start: 2; grid-column-start: 1; grid-row-end: 4; grid-column-end: 3; } 

Quando você pergunta

 .main { grid-area: main; } 

Isso realmente significa:

 .main { grid-area: main / main / main / main ; } 

A propriedade da grid-area se comporta de maneira um pouco diferente quando um identificador de usuário é usado, em vez de um número de linha. Ao usar números de linha para valores iniciais na propriedade da grid-area , qualquer número de linha final que você não especificar será automaticamente definido como auto , portanto, o posicionamento automático será usado para determinar onde colocar o elemento.

No entanto, se você usar um ID do usuário e pular algumas linhas, elas serão definidas da seguinte maneira

Três nomes de linha especificados

 .main { grid-area: main / main / main ; } 

Se você especificar três nomes de linhas, essencialmente estará faltando grid-column-end . Se o grid-column-start for um identificador de usuário, o mesmo identificador também será definido para o grid-column-end . Como já vimos, a propriedade -end usará a face final da main ; portanto, se grid-column-start e grid-column-end definidos com o mesmo nome, o conteúdo será estendido para todas as colunas dessa área.

Dois nomes de linha especificados

 .main { grid-area: main / main ; } 

Quando apenas dois nomes são especificados, as linhas iniciais das linhas e colunas são definidas. Se o grid-column-start e / ou o grid-row-start for um identificador de usuário, o grid-column-end grid-row-end e o grid-column-end grid-row-end serão definidos com o mesmo valor, respectivamente.

Nome de uma linha especificado

 .main { grid-area: main ; } 

Definir um nome de linha única é exatamente o que você faz quando define a área da grade como o nome principal da área. Nesse caso, todas as quatro linhas são definidas para esse valor.

Nota : Isso funciona para grid-column e grid-row .

Na verdade, esse método significa que você pode designar um conjunto de colunas ou linhas em uma grade para colocar um elemento. Como os valores -end da propriedade da grid-area da grid-area são definidos com os mesmos valores iniciais (quando omitidos), os valores finais das propriedades da grid-column grid-row também se comportam. Isso significa que você pode colocar o elemento entre as linhas de coluna inicial e final da área main usando:

 .main { grid-column: main ; } 

No Breaking Out with CSS Grid explicado, mostrei como esse recurso é usado para criar padrões de design úteis para áreas de tamanho normal que vão além de uma área de conteúdo limitada.

Uma grade pode ter muitas linhas nomeadas.

Tudo isso significa que a grade como resultado pode conter um grande número de linhas nomeadas. Na maioria dos casos, você não deve se preocupar com isso. Trabalhe com as linhas necessárias e ignore a existência de outras pessoas.

Nomeação e propriedades abreviadas de grade e modelo de grade

A Grade CSS possui duas abreviações que permitem definir muitas propriedades da grade em uma sintaxe compacta. Pessoalmente, parece difícil o suficiente para mim perceber. Quando discuto isso com outros desenvolvedores, as opiniões são divididas: algumas como elas, outras preferem usar propriedades separadas. Como no caso de outras abreviações, deve-se lembrar que os valores das propriedades que você não utiliza serão redefinidos para o original

Abreviação de modelo de grade: criando uma grade explícita

Você pode usar o atalho do grid-template para definir todas as propriedades de uma grade explícita em um local ao mesmo tempo

 grid-template-columns grid-template-rows grid-template-areas 

Isso significa que você pode definir linhas e áreas nomeadas ao mesmo tempo. Ao usar uma propriedade que combina áreas e linhas nomeadas, eu determinaria primeiro o valor da propriedade grid-template-areas , conforme descrito na seção acima.

Você pode querer adicionar nomes de linhas. Eles são colocados no início e no final de cada linha de valores - lembre-se de que cada linha de valores representa uma trilha de linha. O nome ou os nomes das cadeias devem estar entre colchetes, assim como ao nomear as linhas na propriedade grid-template-rows lines, e devem estar fora das aspas que cercam a cadeia de valores que define a faixa de linhas.

No exemplo abaixo, nomeei duas linhas de linha: o panel-start ocorre após a linha do cabeçalho (segunda linha da grade) e o panel-end segue a última linha do rodapé (quarta linha da grade com três faixas de linha). Também determinei o tamanho da trilha de linha para as linhas nomeadas e não nomeadas adicionando um parâmetro no final da linha de valor que descreve essa trilha de linha

 .grid { display: grid; grid-gap: 20px; grid-template: " head head head head head head" 10vh [panel-start] "side side main main main main" minmax(200px, auto) ".... .... foot foot foot foot" 10vh [panel-end]; } 

Se também for necessário nomear as colunas, não podemos fazer isso dentro da linha; portanto, precisamos adicionar o separador / e, em seguida, definir uma lista de trilhas de colunas. As linhas são nomeadas como se essa lista fosse o valor da propriedade grid-template-columns .

 .grid { display: grid; grid-gap: 20px; grid-template: " head head head head head head" 10vh [panel-start] "side side main main main main" minmax(200px, auto) ".... .... foot foot foot foot" 10vh [panel-end] / [full-start ] 1fr [panel-start] 2fr 1fr 2fr 1fr [panel-end] 2fr [full-end]; } 

Neste exemplo, que você pode ver no código abaixo, eu crio um conjunto adicional de linhas para linhas e colunas; essas linhas definem uma área chamada panel , pois usei a sintaxe panel-start e panel-end . Dessa forma, eu posso colocar o elemento definindo o valor do panel da propriedade da grid-area .

À primeira vista, isso parece bastante incompreensível. Então, aqui criamos uma lista de colunas alinhadas de acordo com nossa tabela ASCII definida acima. Opcionalmente, adicione espaços entre valores para alinhar a definição de template-areas template-columns .

Codepen 8. Grade - abreviação de modelo

Abreviação de grade: malha implícita e explícita

A especificação pressupõe que, se você precisar definir uma grade implícita separadamente, use a propriedade shorthand grid em vez do grid-template . A grid abreviação redefine todos os valores implícitos que você não definiu. Assim, permite definir e redefinir as seguintes propriedades

 grid-template-columns grid-template-rows grid-template-areas grid-auto-columns grid-auto-rows grid-auto-flow 

Para nossos propósitos, o uso da abreviação de grid será idêntico ao uso do grid-template , pois definimos uma definição implícita de grade. A única diferença estará na redefinição das propriedades grid-auto–* . A abreviação de grid pode ser usada para definir a grade explícita e redefinir as propriedades implícitas ou para definir a grade implícita e redefinir as propriedades explícitas. Fazer as duas coisas ao mesmo tempo não faz muito sentido

 .grid { display: grid; grid-gap: 20px; grid: " head head head head head head" 10vh [panel-start] "side side main main main main" minmax(200px, auto) ".... .... foot foot foot foot" 10vh [panel-end] / [full-start ] 1fr [panel-start] 2fr 1fr 2fr 1fr [panel-end] 2fr [full-end]; } 

Nota : Na versão original recomendada da especificação CSS Grid, essa redução também redefine as propriedades de espaço entre as células de espaço entre grid-column-gap grid-row-gap e grid-column-gap entre grid-row-gap . No entanto, esse comportamento acabou sendo alterado. Os navegadores atualizam esse comportamento, mas no momento da redação (outubro de 2017), ainda era possível encontrar uma situação em que o valor das propriedades da gap é redefinido para zero quando a redução é usada, portanto, você pode precisar redefini-las mais tarde

Qual abordagem usar?

Você pode perguntar qual desses métodos é melhor usado para uma tarefa específica? Não há regras estritas. Pessoalmente, gosto de usar grid-template-areas para componentes quando trabalho na minha biblioteca de modelos. É conveniente ter a estrutura do componente bem na frente dos seus olhos diretamente nas áreas de CSS e grid-template-areas , facilitando a experimentação de diferentes opções de layout ao testá-lo. Descobri que, devido a um movimento tão simples das células da malha, é importante garantir que a ordem visual e lógica das células componentes não seja perturbada. Os visitantes que interagem com seu site usando o teclado, alternando entre os elementos com o botão Tab, selecionam os elementos na ordem em que são definidos na marcação. Lembre-se de reordenar o layout assim que decidir sobre a maneira mais apropriada de exibir seu conteúdo. Para saber mais sobre esse problema, sugiro ler o artigo CSS Grid Layout and Accessibility .

Convenções básicas de nomenclatura

Para resumir o artigo, recapitularei algumas regras básicas a serem lembradas ao nomear linhas ou áreas da CSS Grid:

Nomeação de linha:

1. Você pode usar quase qualquer nome (exceto a palavra-chave span), mas também pode usar a área criada a partir dessas linhas se seus nomes terminarem com -start e -end
2. As linhas podem ter vários nomes definidos entre colchetes e separados por um espaço
3. Várias linhas podem ter o mesmo nome; se você precisar de um específico, basta adicionar o número da linha necessária após o nome para

Áreas de Nomeação:

1. Ao definir uma área usando grid-template-areas , a forma da área deve ser retangular
2. Ao usar a propriedade grid-template-areas , cada faixa de linha da grade é representada como uma sequência de valores e é exibida entre aspas
3. Cada célula deve ser preenchida. Se por design você desejar deixar algumas células vazias, use um ponto para isso . ou reticências ... sem espaços
4. As regiões nomeadas criam linhas com o mesmo nome da região, mas com os -end -start e -end . Eles podem ser usados ​​para posicionar elementos.