Compreendendo a grade CSS: áreas de modelo de grade

Ao usar o layout de grade CSS, você sempre pode colocar itens de uma linha de grade para outra. No entanto, existe uma maneira alternativa de descrever seu layout, que é de natureza visual. Neste artigo, aprenderemos como usar a propriedade grid-template-areas para definir o posicionamento na grade e descobrir como a propriedade realmente funciona.

Caso você tenha perdido os artigos anteriores desta série, você pode encontrá-los aqui:

• Parte 1: Criando um contêiner de grade
• Parte 2: Linhas de grade
• Parte 3: Áreas do modelo de grade

Descrevendo o layout com grid-template-areas

A propriedade grid-template-areas aceita uma ou mais strings como valor. Cada string (entre aspas) representa uma linha de sua grade. Você pode usar a propriedade em uma grade que definiu usando grid-template-rows e grid-template-columns ou pode criar seu layout, caso em que todas as linhas serão dimensionadas automaticamente.

A propriedade e o valor a seguir descrevem uma grade com quatro áreas — cada uma abrangendo duas trilhas de coluna e duas trilhas de linha. Uma área é feita para abranger várias faixas, repetindo o nome em todas as células que você gostaria de cobrir:

 grid-template-areas: "one one two two" "one one two two" "three three four four" "three three four four";

Os itens são colocados no layout sendo nomeados com um ident usando a propriedade grid-area . Portanto, se eu quiser colocar um elemento com uma classe de test na área da grade chamada one , eu uso o seguinte CSS:

 .test { grid-area: one; }

Você pode ver isso em ação no exemplo do CodePen mostrado abaixo. Tenho quatro itens (com classes de um a quatro); estes são atribuídos à área de grade relevante usando a propriedade grid-area e, portanto, exibidos na grade nas caixas corretas.

Se você usar o Firefox Grid Inspector, poderá ver os nomes das áreas e as linhas de grade demonstrando que cada item realmente abrange duas linhas e duas linhas de coluna - tudo sem fazer nenhum posicionamento baseado em linha no próprio item.

Regras para usar grid-template-areas

Existem algumas regras ao criar um layout dessa maneira. Quebrar as regras tornará o valor inválido e, portanto, seu layout não acontecerá. A primeira regra é que você deve descrever uma grade completa , ou seja, todas as células da sua grade devem ser preenchidas.

Se você quiser deixar uma célula (ou células) como espaço vazio, faça isso inserindo um arquivo . ou séries como ... sem espaço entre elas.

Portanto, se eu alterar o valor de grid-template-areas da seguinte forma:

 grid-template-areas: "one one two two" "one one two two" ". . four four" "three three four four";

Agora tenho duas células sem conteúdo nelas. O item três é exibido apenas na última linha da grade.

Você só pode definir cada área uma vez , o que significa que você não pode usar esta propriedade para copiar o conteúdo em dois lugares na grade! Portanto, o valor a seguir seria inválido e faria com que toda a propriedade fosse ignorada, pois duplicamos a área three :

 grid-template-areas: "one one three three" "one one two two" "three three four four" "three three four four";

Você não pode criar uma área não retangular, então a propriedade não pode ser usada para criar uma área em forma de 'L' ou 'T' — tornando o valor a seguir também inválido:

 grid-template-areas: "one one two two" "one one one one" "three three four four" "three three four four";

Formatando as strings

Eu gosto de exibir o valor de grid-template-areas como eu fiz acima (com cada string representando uma linha abaixo da linha anterior). Isso me dá uma representação visual de qual será o layout.

Para ajudar com isso, é importante adicionar caracteres de espaço em branco adicionais entre cada célula e também usar vários arquivos . caracteres que denotam células vazias.

No valor abaixo, usei vários caracteres de espaço em branco entre palavras menores e também vários . caracteres para que as células vazias se alinhem:

 grid-template-areas: "one one two two" "one one two two" "..... ..... four four" "three three four four";

Dito isso, também é completamente válido ter todas as strings em uma linha, então podemos escrever nosso exemplo da seguinte forma:

 grid-template-areas: "one one two two" "one one two two" "three three four four" "three three four four";

Explicando grid-template-areas grid-area

A razão pela qual cada área precisa ser um retângulo completo é que ela precisa ter a mesma forma que você poderia criar usando o posicionamento baseado em linha. Se continuarmos com nosso exemplo acima, poderíamos fazer esse layout com linhas de grade como no próximo CodePen. Aqui eu criei minha grade como antes. Desta vez, no entanto, usei linhas de grade para criar o posicionamento usando as propriedades longas grid-column-start , grid-column-end , grid-row-start e grid-row-end .

Nota : Se você ler meu artigo anterior “Entendendo CSS Grid: Grid Lines” você saberá que é possível usar grid-area como um atalho para declarar todas as quatro linhas de uma vez.

Isso significa que também poderíamos criar nosso layout com a seguinte ordem de linhas:

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

 .one { grid-area: 1 / 1 / 3 / 3; } .two { grid-area: 1 / 3 / 3 / 5; } .three { grid-area: 3 / 1 / 5 / 3; } .four { grid-area: 3 / 3 / 5 / 5; }

A propriedade grid-area é interessante, pois pode receber números de linha e nomes de linha. Também é importante entender a maneira diferente como ele se comporta quando em cada modo.

Usando grid-area com números de linha

Se você usar a propriedade grid-area com números de linha, as linhas serão atribuídas na ordem descrita acima.

Se você perder algum valor - fornecendo números de 1, 2 ou 3 linhas - os valores ausentes são definidos como auto , o que significa que a área abrangerá 1 faixa (sendo o padrão). Portanto, o CSS a seguir colocaria um item grid-row-start: 3 com todos os outros valores definidos como auto, portanto, o item seria colocado automaticamente na primeira trilha de coluna disponível e abrangeria uma trilha de linha e uma trilha de coluna.

 grid-area: 3;

Usando grid-area com Idents

Se você usar um ident (que é como uma área nomeada é chamada no Grid Layout), a propriedade grid-area também leva quatro linhas. Se você tiver linhas nomeadas em sua grade conforme descrito em “Compreendendo a grade CSS: criando um contêiner de grade”, você pode usar essas linhas nomeadas da mesma forma que as linhas numeradas.

No entanto, o que acontece quando você perde algumas linhas é diferente de quando você usa idents e não números.

Abaixo, criei uma grade com linhas nomeadas e usei grid-area para colocar um item (faltando o valor final):

 .grid { display: grid; grid-template-columns: [one-start three-start] 1fr 1fr [one-end three-end two-start four-start] 1fr 1fr [two-end four-end]; grid-template-rows: [one-start two-start] 100px 100px [one-end two-end three-start four-start] 100px 100px [three-end four-end];; } .two { grid-area: two-start / two-start / two-end; }

Isso significa que está faltando o nome da linha para grid-column-end . A especificação diz que nessa situação, grid-column-end deve usar uma cópia de grid-column-start . Se grid-column-end e grid-column-start forem idênticos, a linha final será descartada e, essencialmente, o valor será definido como auto, de modo que abrangemos uma faixa como na versão numerada.

A mesma coisa acontece se perdermos o terceiro valor grid-row-end ; torna-se o mesmo que grid-row-start e, portanto, torna-se auto .

Dê uma olhada no próximo exemplo do CodePen de como cada grid-area é usada e como isso altera o layout do item:

Isso explica por que grid-area funciona com um único valor ident representando um nome de área.

Quando criamos uma área nomeada com a propriedade grid-template-areas , a borda de cada área pode ser referenciada por um nome de linha que é o mesmo que o nome da área que você usou. No nosso caso, poderíamos pegar nossa área com o nome one e colocar nosso item usando linhas nomeadas da seguinte forma:

 .one { grid-row-start: one; grid-row-end: one; grid-column-start: one; grid-row-end: one; }

Se a linha for one linha -start , será resolvido para o final inicial da coluna ou linha. Se for uma linha -end , resolve- one para a linha final da coluna ou linha.

Isso significa que quando dizemos grid-area: one , omitimos os três últimos valores para a abreviação grid-area ; todos eles acabam sendo cópias do primeiro valor - todos no nosso caso se tornam one e o item é colocado exatamente como no nosso uso à mão.

A maneira como a nomeação funciona no Grid Layout é inteligente e permite algumas coisas interessantes, sobre as quais escrevi em meus artigos anteriores “Nomeando coisas no CSS Grid Layout” e “Editorial Design Patterns With CSS Grid And Named Columns”.

Itens de camadas ao usar grid-template-areas

Apenas um nome pode ocupar cada célula ao usar grid-template-areas , no entanto, você ainda pode adicionar itens adicionais à grade depois de fazer seu layout principal dessa maneira. Você pode usar os números de linha como de costume.

No exemplo do CodePen abaixo, adicionei um item adicional e o posicionei usando o posicionamento baseado em linha sobre os itens já posicionados:

Você também pode usar nomes de linhas definidos ao criar suas colunas ou linhas usuais. Melhor ainda, você terá alguns nomes de linha criados pela formação das áreas. Já vimos como você pode obter quatro nomes de linha com o nome da área. Você também obtém uma linha na borda inicial de cada área com -start anexado ao nome da área e uma linha na borda final de cada área com -end anexado.

Portanto, a área denominada one tem linhas de aresta inicial denominadas one-start e linhas de aresta final denominadas one-end .

Você pode usar esses nomes de linha implícitos para colocar um item na grade. Isso pode ser útil se você estiver redefinindo a grade em pontos de interrupção diferentes, desde que sempre deseje que o item colocado venha após um determinado nome de linha.

Usando áreas de modelo de grade em design responsivo

Costumo trabalhar com a construção de componentes em uma biblioteca de componentes e acho que o uso grid-template-areas pode ser útil em termos de poder ver exatamente como um componente ficará no CSS. Também é muito simples redefinir o componente em diferentes pontos de interrupção, redefinindo o valor de grid-template-areas às vezes, além de alterar o número de trilhas de coluna disponíveis.

No CSS abaixo, defini um layout de coluna única para meu componente. Em seguida, com uma largura mínima de 600px, redefino o número de colunas e também o valor de grid-template-areas para criar um layout com duas colunas. O legal dessa abordagem é que qualquer um olhando para este CSS pode ver como o layout funciona!

 .wrapper { background-color: #fff; padding: 1em; display: grid; gap: 20px; grid-template-areas: "hd" "bd" "sd" "ft"; } @media (min-width: 600px) { .wrapper { grid-template-columns: 3fr 1fr; grid-template-areas: "hd hd" "bd sd" "ft ft"; } } header { grid-area: hd; } article {grid-area: bd; } aside { grid-area: sd; } footer { grid-area: ft; }

Acessibilidade

Você precisa estar ciente ao usar esse método que é muito fácil mover as coisas e causar o problema de desconectar a exibição visual da ordem de origem subjacente. Qualquer um que estiver navegando pelo site, ou que estiver assistindo a tela enquanto o conteúdo é falado, usará a ordem em que as coisas estão na fonte. Ao mover a tela dessa ordem, você pode criar uma experiência muito confusa e desconectada. Não use esse método para mover as coisas sem também garantir que a fonte esteja em uma ordem sensata e corresponda à experiência visual.

Resumo

Esse é o resumo sobre o uso das propriedades grid-template-area e grid-area para criar layouts. Se você não usou esse método de layout antes, experimente. Acho que é uma maneira adorável de experimentar layouts e geralmente usá-lo ao prototipar um layout - mesmo que por um motivo ou outro, no fim das contas, usemos um método diferente para a versão de produção.