CSS Grid: posicionando elementos no grid, na prática

No post anterior dessa série, aprendemos o básico que precisamos saber sobre CSS Grid para usá-lo em nossos projetos. Agora, vamos nos aprofundar em como posicionar elementos em um contêiner grid (elemento com display: grid).

Índice

• Definindo a posição de um elemento no contêiner grid
• Elementos que ocupam mais de uma linha ou coluna no contêiner grid
• Usando span em grid-column e grid-row
• Sobrepondo elementos em um contêiner grid
• Continue aprendendo

Definindo a posição de um elemento no contêiner grid

Além de definir o tamanho e quantidade de linhas e colunas em um contêiner grid, nós podemos definir a posição de cada elemento separadamente.

Usando grid-column e grid-row, podemos definir em qual coluna ou linha um item começa e termina.

Para começar nossos exemplos, vamos criar uma div com a classe container com seis elementos dentro:

<div class="container">
  <div class="item item-1">Um</div>
  <div class="item item-2">Dois</div>
  <div class="item item-3">Três</div>
  <div class="item item-4">Quatro</div>
  <div class="item item-5">Cinco</div>
  <div class="item item-6">Seis</div>
</div>

Para distribuir esses elementos, eu vou criar algumas linhas e colunas com grid-template-columns e grid-template-rows.

.container {
  display: grid;
  grid-template-rows: 100px 200px 100px;
  grid-template-columns: 100px 200px 200px;

  background: #fff6fa;
  width: max-content; /* impede que o contêiner seja maior que o tamanho do seu conteúdo. */
  gap: 10px;
}

.item {
  background: #b688e0;
  color: #6e33a6;
}

O resultado é um contêiner grid com três linhas e três colunas.

Algumas das células disponíveis no nosso contêiner não foram preenchidas, já que por padrão cada elemento vai ocupar uma célula por vez.

Usando grid-row, podemos mudar a posição de um elemento como o .item-1 para qualquer linha.

.item-1 {
  grid-row: 2;
  background: #5ed4b9; /* apenas para destacar o item-1 */
}

Ao usar grid-row: 2, o elemento .item-1 será posicionado na segunda linha. Na imagem a seguir, os números das linhas e das colunas estão marcados para entendermos onde cada uma está.

Você pode perceber que os outros items do grid também mudaram de posição. Por padrão o valor de grid-row e grid-column é auto, o que significa que o algoritmo por trás do posicionamento dos elementos decidirá onde cada um será posicionado, tentando não deixar espaços em branco.

Elementos que ocupam mais de uma linha ou coluna no contêiner grid

Além de receber o número da linha ou coluna, as propriedades grid-row e grid-column também podem receber valores como 1 / 3 ou 2 / 4. Estes valores definem o número da linha/coluna em que o elemento começa e termina.

.item-1 {
  grid-row: 1 / 3;
  background: #5ed4b9; /* apenas para destacar o item-1 */
}

Podemos usar grid-row e grid-column ao mesmo tempo para posicionar elementos com mais precisão.

.item-1 {
  grid-row: 2;
  grid-column: 1 / 4;
  background: #5ed4b9; /* apenas para destacar o item-1 */
}

Dica: Escrever grid-column: 1 / 4 é a forma abreviada de usar as propriedades grid-column-start e grid-column-end — assim como grid-row abrevia grid-row-start e grid-row-end.

Para facilitar ainda mais a nossa vida, essas propriedades também recebem números negativos. Números negativos significam que contar as linhas/colunas de trás pra frente. -1 é a última, -2 a penúltima…

.item-1 {
  grid-column: 1 / -1;
  background: #5ed4b9; /* apenas para destacar o item-1 */
}

Essas propriedades tornam possível a criação de layouts bastante complexos com CSS Grid. A flexibilidade em tamanho de linhas e colunas, junto com a possibilidade de definir a posição de um elemento no contêiner grid abre um mar gigantesco de oportunidades que não existem em outras formas de criar layouts com CSS.

Usando span em grid-column e grid-row

Além de valores absolutos, grid-column e grid-row também podem receber valores de span, que significa distância em inglês.

Um uso comum para span é definir que um elemento do contêiner grid deve ocupar uma certa quantidade de colunas:

.item-1 {
  grid-column: span 2;
  background: #5ed4b9; /* apenas para destacar o item-1 */
}

O span também pode ser utilizado como valor de grid-column-start ou grid-column-end. Nesses casos, span definirá a quantidade de linhas/colunas que o elemento ocupará e onde ele começará/terminará.

Sobrepondo elementos em um contêiner grid

Usando grid-column e grid-row, conseguimos também sobrepor elementos em um contêiner grid. Essa técnica é incrível.

Para sobrepor elementos, você deve definir a posição dos elementos que quiser sobrepor no contêiner grid. Aqui vai um exemplo:

.item-1 {
  grid-column: 1 / span 2;
  grid-row: 1 / span 3;
}

.item-3 {
  grid-column: 2 / span 2;
  grid-row: 2;
  background: #5ed4b9; /* apenas para destacar o item-3 */
}

Em vez de sobrepor elementos com position: absolute e posicionamento manual, sobrepô-los com CSS Grid garante que você possa aplicar todas as técnicas de alinhamento e posicionamento que vêm com essa forma de criar layouts.

Assim fica fácil sobrepor elementos em layouts responsivos e que se adaptam ao conteúdo.

Continue aprendendo

Agora você já sabe posicionar elementos em um contêiner grid. Esse post faz parte de uma série sobre CSS Grid:

• CSS Grid: o básico que você precisa saber (com exemplos);
• CSS Grid: posicionando elementos, na prática;
• CSS Grid: alinhando elementos (com exemplos);
• Criando layouts responsivos com CSS Grid;
• Usando grid-template-areas do CSS Grid;

Bons estudos!