Advertisement
  1. Web Design
  2. CSS Grid Layout

Layout em Grade do CSS: Usando Áreas de Grade

Scroll to top
Read Time: 4 min
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()

() translation by (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:

1
.item-1 {
2
  background: #b03532;
3
  grid-column: 1 / 3;
4
  grid-row: 1;
5
}

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.

1
.item-1 {
2
  background: #b03532;
3
  grid-column: 1 / 3;
4
  grid-row: 1 / 3;
5
}

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.

1
.item-1 {
2
  background: #b03532;
3
  grid-column: 1 / span 2;
4
  grid-row: 1 / span 2;
5
}

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:

1
.grid-1 {
2
    /* ..existing styles */
3
    
4
    grid-template-areas:    "header header header"
5
                            "main main sidebar"
6
                            "footer footer footer";
7
}

Posicionando os Itens:

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

1
.item-1 {
2
  background: #b03532;
3
  grid-area: header;
4
}
5
.item-2 {
6
  background: #33a8a5;
7
  grid-area: main;
8
}
9
.item-3 {
10
  background: #30997a;
11
  grid-area: sidebar;
12
}
13
.item-4 {
14
  background: #6a478f;
15
  grid-area: footer;
16
}

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.

1
<section class="grid-1">
2
  <div class="item-1">1</div>
3
  
4
  <div class="item-2">
5
    <div class="item-5">5</div>
6
    <div class="item-6">6</div>
7
    <div class="item-7">7</div>
8
  </div>
9
  
10
  <div class="item-3">3</div>
11
  <div class="item-4">4</div>
12
</section>

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

1
  display: grid;
2
  
3
  grid-template-columns: 1fr 30%;
4
  grid-template-rows: auto auto;
5
  grid-gap: 20px;
6
  
7
  grid-template-areas: "header header"
8
                       "article sidebar";

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
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
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.