CSS Grid Layout [Parte 2] – Posicionamento de elementos no Grid

Técnicas para construção de layouts através de posicionamento de elementos

| Publicado em 29 de janeiro de 2019

Olá! Chegamos a segunda parte da série de artigos sobre CSS Grid Layout.

Nesta segundo artigo você vai entender sobre formas de posicionar e preencher espaço dentro de um contêiner com elementos (itens). Conhecer as técnicas para executar estas tarefas é de fundamental importância para que você possa construir seus primeiros layouts com CSS Grid Layout.

E você conhecerá formas variadas e comportamentos fantásticos que o CSS Grid Layout nos oferece para desenvolver layouts.

Você verá que com algumas linhas de CSS já dá para distribuir blocos para formar um layout de uso comum na web. Aliás CSS Grid Layout é um módulo poderoso para construir do layout mais simples até o mais complexo.

E caso você esteja tendo seu primeiro contato com este módulo de construção de layout eu sugiro que você veja primeiro o artigo 1 da série para depois sim partir para esse.

Artigo 1 → CSS Grid Layout [Parte 1] – Guia introdutório

Bom, então sem mais delongas vamos para os conceitos e exemplos prático de posicionamento. Procure seguir cada linha de código exposta para plena compreensão. Boa leitura!

Posicionamento de elementos através de grid-columns e grid-rows

Exemplo 1

Código HTML:

<div class="container">
  <div class="topo box">Topo</div>
  <div class="sidebar box">Sidebar</div>
  <div class="conteudo box">Área de Conteúdo</div>
  <div class="rodape box">Rodapé</div>
<div>

Código CSS:

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 50px 200px 50px;
}
.box {
  color: #fff;
  padding: 1em;
  text-align: center;
}
.topo {
  background-color:#2771b2;  
  grid-column-start: 1; 
  grid-column-end: 5;
  grid-row-start: 1;
  grid-row-end: 2;
}
.sidebar {
  background-color:#e32223;  
  grid-column-start: 1; 
  grid-column-end: 2;
  grid-row-start: 2;
  grid-row-end: 3;  
}
.conteudo {
  background-color:#f3e500; 
  grid-column-start: 2; 
  grid-column-end: 5;
  grid-row-start: 2;
  grid-row-end: 3;  
}
.rodape {
  background-color:#6d378b; 
  grid-column-start: 1; 
  grid-column-end: 5;
  grid-row-start: 3;
  grid-row-end: 4;  
}

Agora vamos ver no JSFiddle.

É possível manipular as Grid Lines com as propriedades grid-column e grid-row para posicionar elementos. Tanto grid-column quanto grid-row são shorthand das propriedades variantes grid-column-start, grid-column-end, grid-row-start e grid-row-end.

Caso não existe esta manipulação o posicionamento segue automaticamente obedecendo a ordem do documento HTML fazendo que cada elemento ocupe cada Grid Item do contêiner e seguindo o fluxo padrão que organiza os itens por linha.

O posicionamento de um elemento se dá definindo em qual Grid Line, tanto das colunas quanto das linhas, deve começar e em qual deve terminar. A grid-column-start e a grid-row-start definem em qual Grid Line começa o posicionamento de um elemento, e a grid-column-end mais a grid-row-end definem em qual Grid Line termina este posicionamento.

No exemplo utilizamos primeiro as variantes grid-column-start, grid-column-end, grid-row-start e grid-row-end porque conhecendo estas propriedades fica mais fácil de entender as shorthand.

Vamos pegar o elemento Topo para entendermos o funcionamento. Focaremos primeiro em quantas colunas este elemento está posicionado. A propriedade grid-column-start com o valor 1 define que o elemento deve iniciar se posicionamento na Grid Line vertical 1, e deve terminar na Grid Line vertical 5, como declaramos em grid-column-end: 5.

Agora focando na linha vemos que o Topo está entre as Grid Lines horizontais 1 e 2 declaradas como grid-row-start: 1 e grid-row-end: 2. Então concluímos que o Topo abrange a área de quatro colunas entre as Grid Lines verticais 1 e 5, e abrange também a área de 1 linha entre as Grid Lines horizontais 1 e 2.

Para entender o posicionamento dos outros elementos basta seguir o mesmo raciocínio e os números de linha inicial e final a essas propriedades. Agora vamos ao exemplo 2.

Exemplo 2

Código HTML:

<div class="container">
  <div class="topo box">Topo</div>
  <div class="sidebar box">Sidebar</div>
  <div class="conteudo box">Área de Conteúdo</div>
  <div class="rodape box">Rodapé</div>
<div>

Código CSS:

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 50px 200px 50px;
}
.box {
  color: #fff;
  padding: 1em;
  text-align: center;
}
.topo {
  background-color:#2d82cd;  
  grid-column: 1 / 5; 
  grid-row: 1 / 2; /* ou grid-row: 1; */
}
.sidebar {
  background-color:#e32223;  
  grid-column: 1; /* ou grid-column: 1 / 2; */
  grid-row: 2;  /* ou grid-row: 2 / 3; */
}
.conteudo {
  background-color:#f3e500; 
  grid-column: 2 / 5; 
  grid-row: 2; /* ou grid-row: 2 / 3; */
}
.rodape {
  background-color:#6d378b; 
  grid-column: 1 / -1; /* ou grid-column 1 / 5; */
  grid-row: 3; /* ou grid-row: 3 / 4; */
}

Agora vamos ver no JSFiddle.

Nós podemos diminuir códigos e ganhar tempo usando as versões shorthand grid-column e grid-row no lugar das propriedades variantes. Neste exemplo 2 praticamente o resultado é o mesmo do exemplo 1, só que com as shorthands substituindo as propriedades variantes.

Vemos no topo que usamos para as colunas a declaração grid-colums: 1 / 5;. O valor 1 corresponde a declaração grid-column-start: 1; e o valor 5 corresponde a declaração grid-column-end: 5;. Tudo que temos que fazer é definir as Grid Lines inicial e final e separar o valores com uma barra /. Esse raciocínio é o mesmo para grid-row.

Uma outra coisa que podemos notar é que quando um elemento não abranger mais que uma coluna ou linha não é necessário declarar as duas posições de Grid Lines, basta somente a Grid line inicial que é o suficiente para os navegadores interpretem corretamente. É o que acontece no elemento sidebar. Ele ocupa somente um coluna e uma linha e foi declarada só a posição inicial das mesmas, grid-column: 1; que é mesma coisa de grid-column: 1 / 2; e grid-row: 2; que é e mesma coisa de grid-row: 2 / 3;.

O elemento da Área de Conteúdo abrange 3 colunas declaradas entre as Grid Lines verticais 2 e 5 (grid-column: 2 / 5;) e abrange também uma linha entre as Grid Lines horizontais 2 e 3 (grid-row: 2, ou grid-row: 2 / 3).

Uma coisa interessante e que deve ser estimulada sua aplicação é o uso do valor reservado -1 utilizado em grid-colum do rodapé. Esse valor deve ser usado quando um elemento precisa ocupar a área total de uma Grid Track na horizontal.

Sabemos, no nosso exemplo, que o rodapé ocupa 4 colunas posicionadas entre 5 linhas e que pode ser declarada da seguinte forma; grid-column: 1 / 5. Mas se inserirmos mais uma coluna o rodapé não abrangerá a área total da Grid Track. Isso só é possível através do valor reservado -1, o que resulta na declaração grid-column: 1 / -1;. Isso também poderia e é super-indicado que se use no elemento Topo deste grid.

Alterando posicionamento de elementos com grid-colums e grid-rows

Código HTML:

<div class="container">
  <div class="topo box">Topo</div>
  <div class="sidebar box">Sidebar</div>
  <div class="conteudo box">Área de Conteúdo</div>
  <div class="rodape box">Rodapé</div>
<div>

Código CSS:

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 50px 200px 50px;
}
.box {
  color: #fff;
  padding: 1em;
  text-align: center;
}
.topo {
  background-color:#2d82cd;  
  grid-column: 1 / -1; 
  grid-row: 3; 
}
.sidebar {
  background-color:#e32223;  
  grid-column: 2 / 5; 
  grid-row: 2;  
}
.conteudo {
  background-color:#f3e500; 
  grid-column: 1; 
  grid-row: 2; 
}
.rodape {
  background-color:#6d378b; 
  grid-column: 1 / -1; 
  grid-row: 1; 
}

Agora vamos ver no JSFiddle.

CSS Grid Layout proporciona um comportamento muito interessante que é posicionar elementos na tela independente da ordem que aparecem no documento HTML. No nosso exemplo usamos o mesmo HTML que vem sendo usado nos exemplos anteriores, mas o resultado visual é diferente onde invertemos as posições do Topo e do Rodapé e também invertemos as posições da Sidebar e da Área de Conteúdo.

Mas como isso acontece?

Simplesmente fazendo que um elemento posterior assuma as posições de Grid Lines de um elemento antecessor.

O que foi feito no exemplo?

  • O Topo foi para a então posição rodapé através da grid-row: 3;.
  • A Sidebar foi para então posição da Área de Conteúdo através da grid-column: 2 / 5;.
  • A Área de Conteúdo foi para então posição do sidebar através de grid-column: 1;.
  • O Rodapé foi para então posição do Topo através de grid-row: 1;.

Posicionando elementos utilizando o comando span

Código HTML:

<div class="container">
  <div class="topo box">Topo</div>
  <div class="sidebar box">Sidebar</div>
  <div class="conteudo box">Área de Conteúdo</div>
  <div class="rodape box">Rodapé</div>
<div>

Código CSS:

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 50px 200px 50px;
}
.box {
  color: #fff;
  padding: 1em;
  text-align: center;
}
.topo {
  background-color:#2d82cd;  
  grid-column: 1 / -1; 
  grid-row: 1; 
}
.sidebar {
  background-color:#e32223;  
  grid-column: 1; 
  grid-row: 2;  
}
.conteudo {
  background-color:#f3e500; 
  grid-column: 2 / span 3; 
  grid-row: 2; 
}
.rodape {
  background-color:#6d378b; 
  grid-column: 1 / -1; 
  grid-row: 3; 
}

Agora vamos ver no JSFiddle.

O comando span determina quantas colunas ou linhas o elemento vai abranger a partir da Grid Line que corresponde ao ponto inicial de posicionamento.

No nosso exemplo, olhando para class .conteudo, vemos o ponto inicial na Grid Line vertical 2 e como o elemento tem que terminar seu posicionamento na Grid Line Vertical 5, então este elemento tem que abranger 3 colunas o que justifica o uso do valor span 3. Então a declaração final é grid-column: 2 / span 3;.

Posicionando elementos através de Grid Areas

Código HTML:

<div class="container">
  <div class="topo box">Topo</div>
  <div class="sidebar box">Sidebar</div>
  <div class="conteudo box">Área de Conteúdo</div>
  <div class="rodape box">Rodapé</div>
<div>

Código CSS:

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 50px 200px 50px;
  grid-template-areas:
    "topo topo topo topo"
    "sidebar conteudo conteudo conteudo"
    "rodape rodape rodape rodape"
}
.box {
  color: #fff;
  padding: 1em;
  text-align: center;
}
.topo {
  background-color:#2d82cd;  
  grid-area: topo;
}
.sidebar {
  background-color:#e32223;  
  grid-area: sidebar;
}
.conteudo {
  background-color:#f3e500; 
  grid-area: conteudo;
}
.rodape {
  background-color:#6d378b; 
  grid-area: rodape;
}

Agora vamos ver no JSFiddle.

O posicionamento de elementos através de Grid Areas é uma das coisas mais surpreendentes do CSS Grid Layout.

Tudo consiste em você nomear áreas que elementos devem ocupar dentro de uma regra CSS e depois usar esse nomes dentro do Grid Container para definir em quantos Grid Items eles devem se posicionar. Para entender vamos ao nosso exemplo.

  • Para o elemento do Topo, que possui a class .topo, foi denominado o nome topo através de grid-area: topo (Observação: você pode usar o nome que bem entender. No caso usei topo para facilitar já que se trata do topo da página).
  • Para o elemento Sidebar, que possui a class .sidebar, foi denominado o nome sidebar através de grid-area: sidebar.
  • Para o elemento da Área de Conteúdo, o que possui a class .conteúdo, foi denominado o nome conteudo através de grid-area: conteudo.
  • Para o elemento Rodapé, que possui a class .rodape, foi denominado o nome rodape através de grid-area: rodape.

Só para reforçar esses elementos são filhos do Grid Container que no caso recebe a class .container. Já na class .container definimos como os elementos devem se posicionar no grid.

Para posicionar devemos usar a propriedade grid-template-areas e usar os nomes atribuidos a grid-area nos elementos para ordenar as posições.

Então como o elemento Topo deve ficar no topo ele deve ser o primeiro a ser declarado. Ele deve ocupar a largura total do layout e como esta largura no grid corresponde a 4 colunas declaradas através de grid-template-columns: repeat(4, 1fr); então o valor do topo deve se apresentar na declaração quatro vezes com espaços entre os valores e entre aspas duplas. Veja a seguir:

grid-template-areas:
  "topo topo topo topo"

Como o elemento topo está somente em uma linha todos valores estão dispostos em uma linha única de código (linha 1 – Entre as Grid Lines 1 e 2).

O próximo elemento é a sidebar e como ela está na linha dois ela vem abaixo dos valores de header e a esquerda já que no Grid ele deve ficar a esquerda. Com isso podemos concluir que a área de conteúdo vem a direita da sidebar, também abaixo dos valores de header e ocupando três posições na declaração porque deve ocupar 3 Grid Items. Veja como fica:

grid-template-areas:
  "topo topo topo topo"
  "sidebar conteudo conteudo conteudo"

E para finalizar, ocupando a terceira linha e quatro coluna, vem o rodapé. E com isso temos a declaração completa que vai permitir a ocupação dos espaços.

grid-template-areas:
  "topo topo topo topo"
  "sidebar conteudo conteudo conteudo"
   "rodape rodape rodape rodape";

Algoritmo Automatic Placement

O Algoritmo Automatic Placement que quer dizer Algoritmos de Arrumação Automática é muito útil para o posicionamento dos elementos porque é responsável pelo fluxo dos items no Grid.

Existe uma propriedade que controla este algoritmo que é a grid-auto-flow. Por padrão este propriedade recebe o valor row. Nos exemplo anteriores todos os contêineres receberam o esta propriedade com valor row mesma sem ser declarada no códigos.

Observamos nos exemplos que os itens preenchem cada linha de uma vez no grid, da esquerda para direita. Se for necessário adicionar mais itens, mas a linha anterior já foi preenchida ela adiciona uma nova linha. É o que veremos no exemplo a seguir.

Exemplo 1

Código HTML:

<div class="container">
  <div class="item-1 box">Grid Item 1</div>
  <div class="item-2 box">Grid Item 2</div>
  <div class="item-3 box">Grid Item 3</div>
  <div class="item-4 box">Grid Item 4</div>
  <div class="item-5 box">Grid Item 5</div>
  <div class="item-6 box">Grid Item 6</div>
  <div class="item-7 box">Grid Item 7</div>
  <div class="item-8 box">Grid Item 8</div>
  <div class="item-9 box">Grid Item 9</div>
<div>

Código CSS:

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 50px);
  grid-auto-flow: row;
}
.box {
  background-color:#f06923;
  color: #fff;
  padding: 1em;
  text-align: center;
}
.box:nth-child(even) {
  background-color:#34a6db;
}

Agora vamos ver no JSFiddle.

Com a declaração do contêiner usando grid-auto-flow: row; os itens foram preenchendo as linhas até completar 3 linhas. Como foi definido que o grid teria 3 colunas então em cada linha foram posicionados 3 itens (itens 1 a 3). Ao fazer isso o próximo item (item 4) foi para próxima linha começando pela coluna da esquerda. E assim seguiu-se preenchendo até completar esta segunda linha com os itens 5 e 6, e finalizando na terceira linha com os itens 7, 8 e 9.

Mas este comportamento muda quando definimos a class .container com grid-auto-flow: column. Vamos ao exemplo a seguir.

Exemplo 2

Código HTML:

<div class="container">
  <div class="item-1 box">Grid Item 1</div>
  <div class="item-2 box">Grid Item 2</div>
  <div class="item-3 box">Grid Item 3</div>
  <div class="item-4 box">Grid Item 4</div>
  <div class="item-5 box">Grid Item 5</div>
  <div class="item-6 box">Grid Item 6</div>
  <div class="item-7 box">Grid Item 7</div>
  <div class="item-8 box">Grid Item 8</div>
  <div class="item-9 box">Grid Item 9</div>
<div>

Código CSS:

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 50px);
  grid-auto-flow: column;
}
.box {
  background-color:#f06923;
  color: #fff;
  padding: 1em;
  text-align: center;
}
.box:nth-child(even) {
  background-color:#34a6db;
}

Agora vamos ver no JSFiddle.

Depois que mudamos o grid-auto-flow para o valor column a propriedade controlou o Algoritmo de Arrumação Automática de forma que os itens fossem posicionados preenchendo cada coluna de cada vez, de cima para baixo. Com isso, como foi definido 3 linhas para o grid, cada item vai se posicionando na coluna até preencher 3 espaços. Em seguida, os próximos itens vão se posicionando na próxima coluna e assim sucessivamente.

Consequentemente na primeira coluna temos os itens 1, 2 e 3. Na segunda coluna os itens 4, 5 e 6. E na terceira coluna os itens 7, 8 e 9.

Grid Explícita e Grid Implícita

Neste tópico entenderemos a classificação entre Grid Explícita e Grid Implícita e observaremos que itens e Grid Tracks podem se posicionar também fora do grid.

Grid Explícita

A grid explícita é constituída por linhas e colunas que você define com grid-template-columns e grid-template-rows, como vimos nos exemplos anteriores e como você pode ver no exemplo a seguir.

Código HTML:

<div class="container">
  <div class="item1 box">1</div>
  <div class="item2 box">2</div>
  <div class="item3 box">3</div>
  <div class="item4 box">4</div>
  <div class="item5 box">5</div>
  <div class="item6 box">6</div>
<div>

Código CSS:

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 70px);
}
.box {
  color: #fff;
  padding: 1em;
  text-align: center;
}
.item1 {
  background-color:#2d82cd;  
}
.item2 {
  background-color:#e32223;  
}
.item3 {
  background-color:#f3e500;
}
.item4 {
  background-color:#6d378b; 
}
.item5 {
  background-color:#08a04f;
}
.item6 {
  background-color:#f538b6; 
}

Agora vamos ver no JSFiddle.

Podemos notar que todos os 6 itens foram posicionados dentro das linhas e colunas declaradas em grid-template-rows e grid-template-columns.

Grid Implícita

Exemplo 1

Grid Implícita é aquela cujo posicionamento do grid extrapolou a Grid Explícita fazendo que alguns dos seus itens posicionassem automaticamente porque não seguem o que foi definido em grid-template-columns e grid-template-rows, e assumindo valores de dimensões automáticos. Ou seja, os Grid Items que estiverem fora da grid fazem parte da Grid Implícita.

Veja no código CSS que nas class “.container” que somente 3 linhas foram declaradas na propriedade grid-temaplate-rows, e como os itens de 1 a 4 ocuparam todas essas linhas os itens 5 e 6 acabaram sendo posicionados em uma quarta linha fora da Grid Explícita.

Você pode estar se perguntando porque os itens 5 e 6 estão fora da Grid Explícita se estão posicionadas nas colunas 1 e 2. Estão foram porque além de estarem posicionadas dentro da coluna declaradas devem também estar posicionadas na linhas.

Código HTML:

<div class="container">
  <div class="item1 box">1</div>
  <div class="item2 box">2</div>
  <div class="item3 box">3</div>
  <div class="item4 box">4</div>
  <div class="item5 box">5</div>
  <div class="item6 box">6</div>
<div>

Código CSS:

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 70px);
  grid-auto-flow: row;
}
.box {
  color: #fff;
  padding: 1em;
  text-align: center;
}
.item1 {
  background-color:#2d82cd;  
  grid-column: 1 / -1;
  grid-row: 1;
}
.item2 {
  background-color:#e32223;   
  grid-column: 1;
  grid-row: 2;
}
.item3 {
  background-color:#f3e500;   
  grid-column: 2 / span 2;
  grid-row: 2;
}
.item4 {
  background-color:#6d378b;    
  grid-column: 1 / -1;
  grid-row: 3;
}
.item5 {
  background-color:#08a04f;
}
.item6 {
  background-color:#f538b6; 
}

Agora vamos ver no JSFiddle o posicionamento dos Grid Items.

Neste exemplo focamos mais nas linhas usamos grid-auto-flow: row e deixamos propositalmente uma linha sem especificação em grid-template-rows. No exemplo a seguir vamos fazer parecido, mas trabalhando em cima das colunas.

Exemplo 2

Código HTML:

<div class="container">
  <div class="item1 box">1</div>
  <div class="item2 box">2</div>
  <div class="item3 box">3</div>
  <div class="item4 box">4</div>
  <div class="item5 box">5</div>
  <div class="item6 box">6</div>
<div>

Código CSS:

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 70px);
  grid-auto-flow: column;
}
.box {
  color: #fff;
  padding: 1em;
  text-align: center;
}
.item1 {
  background-color:#2d82cd;  
  grid-column: 1;
  grid-row: 1 / 3;
}
.item2 {
  background-color:#e32223; 
  grid-column: 1;
  grid-row: 3;
}
.item3 {
  background-color:#f3e500;   
  grid-column: 2;
  grid-row: 1;
}
.item4 {
  background-color:#6d378b;    
  grid-column: 2;
  grid-row: 2 / 4;
}
.item5 {
  background-color:#08a04f;
}
.item6 {
  background-color:#f538b6; 
}

Agora vamos ver no JSFiddle.

Veja no código CSS que nas class “.container” somente 2 colunas foram declaradas na propriedade grid-temaplate-columns, e como os itens de 1 a 4 ocuparam todas essas linhas os itens 5 e 6 acabaram sendo posicionados em uma terceira coluna fora da Grid Explícita.

Em um site dinâmico é comum a inserção de novos blocos de conteúdos automaticamente. Já que isto é previsto, e sabendo que itens poderão ficar de fora da Grid Implícita, podemos utilizar certas propriedades que definem a inserção de novas linhas e colunas e suas dimensões para que os itens as ocupe quando surgirem novos blocos automaticamente. É o que veremos no próximo tópico.

Posicionamento automático com grid-auto-rows e grid-auto-columns

O padrão para linhas e colunas criadas automaticamente na grade implícita é que elas tenham tamanho automático. Mas podemos controlar o dimensionamento da linhas e colunas para que elas ocupem um determinando tamanho com duas propriedades que devem ser declaradas no contêiner. São elas:

  • grid-auto-rows – para definir a alturas da linhas implícitas.
  • grid-auto-columns – para definir a largura das colunas implícitas.

Com isso quando um item, filho do contêiner, for adicionado de forma implícita ele adotará as dimensões estipuladas no elemento pai através de grid-auto-rows e grid-auto-columns.

Para entender vamos ao exemplo 1.

Exemplo 1

Código HTML:

<div class="container">
  <div class="item1 box">1</div>
  <div class="item2 box">2</div>
  <div class="item3 box">3</div>
  <div class="item4 box">4</div>
  <div class="item5 box">5</div>
  <div class="item6 box">6</div>
  <div class="item7 box">7</div>
  <div class="item8 box">8</div>
  <div class="item9 box">9</div>
  <div class="item10 box">10</div>
<div>

Código CSS:

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 50px);
  grid-auto-flow: row;
  grid-auto-rows: 100px;
}
.box {
  color: #fff;
  padding: 1em;
  text-align: center;
}
.item1 {
  background-color:#2d82cd;  
  grid-column: 1 / -1;
  grid-row: 1;
}
.item2 {
  background-color:#e32223;   
  grid-column: 1;
  grid-row: 2;
}
.item3 {
  background-color:#f3e500;   
  grid-column: 2 / span 2;
  grid-row: 2;
}
.item4 {
  background-color:#6d378b;    
  grid-column: 1 / -1;
  grid-row: 3;
}
.item5 , .item7, .item9 {
  background-color:#555;  
}
.item6 , .item8, .item10 {
  background-color:#333; 
}

Agora vamos ver no JSFiddle.

Neste exemplo verificamos que os itens de 1 a 4 foram posicionados preenchendo completamente a Grid Implícita. Já os itens de 5 a 10 (tons em cinza escuro) fazem parte da Grid Implícita.

Elas até, estão tem as colunas dimensionadas por grid-template-columns: repeat(3, 1fr);, porém as alturas foram definidas pela propriedade grid-auto-rows. E caso seja incluídos mais itens de forma implícita após estes, eles deverão assumir também a largura de 100 pixels.

Exemplo 2

Código HTML:

<div class="container">
  <div class="item1 box">1</div>
  <div class="item2 box">2</div>
  <div class="item3 box">3</div>
  <div class="item4 box">4</div>
  <div class="item5 box">5</div>
  <div class="item6 box">6</div>
<div>

Código CSS:

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 70px);
  grid-auto-flow: row;
  grid-auto-rows: 150px;
  grid-auto-columns: 150px;
}
.box {
  color: #fff;
  padding: 1em;
  text-align: center;
}
.item1 {
  background-color:#2d82cd;  
  grid-column: 1 / 4;
  grid-row: 1;
}
.item2 {
  background-color:#e32223;   
  grid-column: 1;
  grid-row: 2;
}
.item3 {
  background-color:#f3e500;   
  grid-column: 2 / span 2;
  grid-row: 2;
}
.item4 {
  background-color:#6d378b;    
  grid-column: 1 / 4;
  grid-row: 3;
}
.item5 {
  background-color:#08a04f;    
  grid-column: 4 / 5;
  grid-row: 1;
}
.item6 {
  background-color:#f538b6;      
  grid-column: 1;
  grid-row: 4 / 5;
}

Agora vamos ver no JSFiddle.

Neste segundo exemplo podemos verificar que os items de 1 a 4 posicionaram preenchendo todos os espaços que compreendem a Grid Explícita que está entre 3 colunas e 3 linhas. E dois itens ficaram fora deste grid.

O item 5 ficou de fora por se posicionar na coluna 5 e o item 6 por se posicionar na linha 5. Mas ambos receberam valores dimensionais declarados em grid-auto-rows: 150px; e grid-auto-columns: 150px;.

Bônus

Para encerrar os exemplos de posicionamentos vamos mostrar um um pouco mais complexo em relação aos anteriores com inserção também de outros elementos HTML com listas e parágrafos. Observe os códigos no Jsfiddle e verá que grande parte das técnicas apresentadas neste artigo foram apresentadas no layout com algumas novidades.

Você também pode ver esta demonstração ampliada clicando aqui »

Como você pode ver construímos um esboço de uma página com topo, sidebar com navegação, área de conteúdo e rodapé. Foram usados elementos do HTML5 para dar semântica aos blocos e como no exemplo anterior foram usados Grid Areas.

Em relação aos exemplos anteriores temos duas novidades:

Uma é o uso de áreas de respiro (gaps) entre os Grid Items através das propriedades grid-column-gap e grid-row-gap e o grande destaque neste exemplo que o uso de um grid dentro de outro.

Olhando o CSS vemos que a class “container” recebe “display: grid” que é responsável por atribuir características de grid ao contêiner. Veja também que existem 3 blocos de cor azul que estão inseridos dentro de um contêiner interno que recebe a class “wrapper”. Este bloco também está recebendo “display: grid” e está aninhado no bloco de class “container”.

Portanto uma das possibilidades do CSS Grid Layout é trabalhar com grids aninhados. E isso com certeza é mão na roda!

Conclusão

Neste artigo vimos diferentes formas de organizar itens em uma grid o que possibilita criar diferentes tipos de layouts, também ordenação, e até uma técnica incrível para posicionamento de elementos utilizando-se de nomes criados por você.

Importante agora que isso não fique somente na leitura. Abra um editor de códigos de sua preferência e procure praticar os códigos que você viu aqui alterando dimensões e posicionamentos de itens para você compreender o comportamento das ações que resultaram no grid.

No próximo e último artigo da série falaremos sobre alinhamento no Grid.

E se você deseja aprender ainda mais sobre CSS Grid Layout, o Chief of Design oferece conteúdo em vídeo sobre essa ferramenta no Curso em Vídeo de Fluência em HTML & CSS. Dê uma conferida!!!

Espero que tenha gostado do artigo. Peço que compartilhe com seus amigos e deixe seu comentário.

Abraço!

Ed Francisco

Olá! Aqui é Ed Francisco, colaborador do Chief of Design desde suas primeiras linhas de conteúdo e de códigos.

Por falar em códigos, acredito que o HTML é a mais notável tecnologia web a qual me permitiu chegar aqui onde estou, e também escrever essas linhas sobre mim para você.

Sou formado em Tecnologia da Produção (foi aqui que conheci o HTML) e em Técnico em Produção Digital, Web e Multimídia (onde aperfeiçoei os meus conhecimentos de HTML).

Sou Paulistano da Zona Leste. Me aventuro tentando desvendar os mistérios da web desde 2008.