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

Layout em Grade do CSS: Usando Áreas de Grade

by
Read Time:4 minsLanguages:
This post is part of a series called Understanding the CSS Grid Layout Module.
CSS Grid Layout: Fluid Columns and Better Gutters
CSS Grid Layout: Going Responsive With auto-fill and minmax()

Portuguese (Português) translation by Erick Patrick (you can also view the original English article)

Algo que mencionamos, mas não cobrimos ainda, são as áreas de grade. Até agora, os itens tem estado dentro de uma única célula de grade, mas podemos obter layouts mais úteis, indo além dessa limitação. Vejamos em ação!

Defininda Áreas de Grade

Eis a grade que temos trabalhado: nove itens de grade posicionados automaticamente dentro de três colunas e três linhas iguais, com 20px de espaçamento.

No momento, os itens possuem apenas coloração, mas voltemos às lições do primeiro tutorial e adicionemos regras para grid-column e grid-row, com algo mais:

Nessa versão curta do grid-column, estamo usando grid-column-start e grid-column-end efetivamente, dizendo para o item começar na linha de grade 1 e terminar na 3.

grid lines
Linhas de grade 1 e 3

Eis o que obtemos: o primeiro item toma duas células, empurrando os outros items para direita e para baixo, de acordo com o algorimo de auto posicionamento da grade.

O mesmo pode ser feito na vertical, dando-nos uma área muito maior no topo esquerdo da grade.

Abrangendo Células

Podemos substituir grid-column-end por uma sintaxe mais fácil, usando span. Com span, não precisamos definir onde as áreas terminam, bastando definir quantas trilhas o item deve abranger.

Isso gera o mesmo resultado, mas se decidirmos alterar o ponto de partida do item, não precisamos alterar o ponto final.

Na demonstração abaixo, podemos ver que limpamos o layout ao remover quatro itens. Declaramos posicionamento de dois dos nossos itens: o primeiro abrange duas colunas e duas linhas, enquanto o quarto começa na coluna 3 e linha 2, abrangendo duas trilhas para baixo:

Os outros itens preencherão os outros espaços automaticamente. Isso mostra perfeitamente que um layout em grade não precisa refletir a ordem dos elementos no código.

Nota: existem diversas situações em que a ordem no código deve refletir a apresentação–não esqueça da acessibilidade.

Áreas Nomeadas

Usar métodos numerados tem funcionado bem, mas as Áreas Modelos de Grade podem tornar a definição de layouts mais intuitiva.

Especificamente, permitem-nos nomear áreas na grade. Com áreas nomeadas, podemos referí-las (ao invés dos números) ao posicionar os itens. Continuemos com nossa demonstração por hora, e usemo-na criando um layout dessa forma:

  • cabeçalho (header)
  • conteúdo principal (main)
  • barra lateral (sidebar)
  • rodapé (footer)

Definimos essas áreas no container da grade, quase como se os desenhássemos:

Posicionando os Itens:

Foquemos agora nos itens, livrando-nos de grid-column e grid-row, lançando mão da grid-area:

Nosso primeiro item é posicionado no cabeçalho, abrangendo as três colunas do cabeçalho. O segundo item é atribuído ao conteúdo principal, o terceiro será a barra lateral e o quarto o rodapé. E eles não precisam seguir a ordem do código–.item-4 poderia estar na área do cabeçalho.

Como vemos, isso facilita muito a criação de layouts. Na verdade, como estamos representando visualmente nossas grades, por que não usar emojis para isso?!

Aninhando Áreas de Grade

Páginas web podem conter vários componentes aninhados, então, vejamos como funcionará em nossa grade.

Ao declaramos um container de grade com display: grid; apenas descendentes diretos viram items de grade. Conteúdo adicionado aos elementos filhos não serão afetados pela grade a não ser que assim seja especificado.

No exemplo, adicionaremos .item-5, .item-6 e .item-7 de volta ao código, aninhando-os no .item-2.

Agora, precisamos declarar que o .item-2 também é container de grade, configurando-o com duas colunas e duas linhas.

Podemos usar os nomes "header", "article" e "sidebar" mais uma vez: não haverá confusão por tudo ter seu próprio contexto. Essas áreas de grade aplicam-se apenas ao .item-2.

Conclusão

Para resumir tudo o que falamos:

  1. grid-column oferece-nos uma versão curta para definir onde um item começa e termina.
  2. Também podemos usar span para tornar as regras mais flexíveis.
  3. grid-template-areas nos dá o poder de nomear nossas áreas de grade (até usando emojis, se quisermos).
  4. Também podemos aninhar grades ao declarar items de grade com display: grid; e seguir o mesmo processo.

Mais uma vez, aprendemos aspectos úteis da especificação de Layout em Grade do CSS e estamos próximos dos casos de usos reais! No próximo tutorial, veremos como construir layouts mais complexos e como design responsivo entra na equação.

Recursos Úteis

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.