Guia completo de CSS Grid

Lucas Batista

12 min readMay 24, 2021

Grid Container

Display

Define o elemento como um contêiner de grid e estabelece um novo contexto de formatação de grid para seu conteúdo.

display: grid;
Gera um grid como elemento de bloco.

display: inline-grid;
Gera um grid como elemento de linha

Grid Template

grid-template-columns e grid-template-rows
Define as colunas/linhas do grid com uma lista de valores separados por espaço. Os valores representam o <track-size>, e o espaço entre eles representa as <grid-lines>

<track-size> Pode ser um tamanho (px, em), uma porcentagem ou uma fração do espaço livre no grid (usando a unidade fr)
<line-name> Um nome arbitrário da sua escolha ou números crescentes a partir de 1 caso nenhum nome seja definido

Quando você deixa um espaço vazio entre os <track-size> e as <line-name> são atribuídas automaticamente a números positivos e negativos:

grid-template-columns: 40px 50px auto 50px 40px;
grid-template-rows: 50px 100px auto;

Nomeando as <line-name>
Observe a sintaxe dos colchetes para nomear as linhas:

grid-template-columns: [primeira-col] 40px [segunda-col] 50px [terceira-col] auto [quarta-col] 50px [quinta-col] 40px [sexta-col];
grid-template-rows: [primeira-linha] 50px [segunda-linha] 100px [terceira-linha] auto [quarta-linha];

Observe que uma linha pode ter mais de um nome. Por exemplo, aqui a segunda linha terá três nomes: segunda-linha, linha1-fim e linha2-comeco:

grid-template-rows: [primeira-linha] 50px [segunda-linha linha1-fim linha2-comeco] 100px [terceira-linha] auto [quarta-linha];

auto
É possível usar auto para definir o tamanho de uma coluna/linha, ele pega o máximo possível de espaço livre.

Esse abaixo é a configuração “definitiva” para um layout responsivo usando repeat, minmax e auto:

grid-template-columns: repeat(auto-fit, minmax(100px, auto));

repeat()
Se sua definição contém partes repetidas, você pode usar a notação repeat() para simplificar as coisas:

grid-template-columns: repeat(3, 20px [col-start]);

O que é equivalente a isto:

grid-template-columns: 20px [col-start] 20px [col-start] 20px [col-start];

Se várias linhas compartilham o mesmo nome, ocorre também quando o repeat() é usado, elas podem ser referenciadas por seu nome de linha e contagem.

grid-column-start: col-start 2;

auto-fill
Preenche a linha com o máximo de colunas possível. Portanto, ele cria colunas implícitas sempre que uma nova coluna pode caber, porque está tentando preencher a linha com o máximo de colunas possível. As colunas recém-adicionadas podem estar vazias, mas ainda ocuparão seu espaço designado na linha.

grid-template-columns: repeat(auto-fill, 100px);

Espaço vazio, porque não há espaço suficiente para uma nova coluna vazia de 100px

Caso possua minmax() as colunas irão expandir esse espaço vazio enquanto não há espaço suficiente para uma nova coluna vazia

grid-template-colums: repeat(auto-fill, minmax(100px, 1fr);

Colunas 6~10 vazias criadas para preenchimento, ainda ocupam espaço.

auto-fit
Encaixa as colunas/linhas atualmente disponíveis no grid-container.

grid-template-columns: repeat(auto-fit, 100px);

Caso possua minmax() as colunas irão expandir para que ocupem todo o espaço disponível na linha. O navegador faz isso após preencher esse espaço extra com colunas/linhas extras (como no auto-fill), mas diferente do auto-fill aqui ele colapsa todas as vazias, assim não ocupando espaço.

grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));

Com auto-fit as colunas vazias criadas para preenchimento colapsaram

Obs.: Necessariamente o auto-fit e auto-fill precisam estar dentro de uma função repeat()

minmax()
É possível passar a médida máximo e mínima de uma track (linha/coluna) usando a notação minmax(). Por exemplo, isso definirá uma coluna com no mínimo 200px e no máximo 1fr (uma fração do espaço livre):

grid-template-columns: minmax(200px, 1fr);

A unidade fr
Permite que você defina o tamanho de um track (linha/coluna) como uma fração do espaço livre do contêiner grid. Por exemplo, isso definirá cada item com um terço da largura do espaço livre do contêiner grid:

grid-template-columns: 1fr 1fr 1fr;

Observação:
O espaço livre é calculado após quaisquer itens não flexíveis. Neste exemplo, a quantidade total de espaço livre disponível para as unidades fr não inclui os 50px:

grid-template-columns: 1fr 50px 1fr 1fr;

grid-template-areas
Define um template de grid referenciando os nomes das áreas de grid que são definidas com a propriedade grid-area dada aos grid items. Repetir o nome de uma área de grid faz com que o conteúdo se espalhe por essas células. Um ponto (.) significa uma célula vazia. Assim a própria sintaxe fornece uma visualização da estrutura da grade.

.grid-container {
  display: grid;
  grid-template-areas: 
    "logo nav"
    "main main"
    "footer footer";
}.grid-item-logo {
  grid-area: logo;
}
.grid-item-nav {
  grid-area: main;
}
.grid-item-footer {
  grid-area: footer;
}

**grid-template-areas:**
“logo nav”
“main main”
“footer footer”;

grid-template
Atalho para definir o grid-template-columns, grid-template-rows e grid-template-areas. A sintaxe para as três propriedades é a seguinte:

grid-template:
"logo nav nav" 50px
"main main main" 150px
"footer footer footer" 100px
/ 100px 1fr 50px;

A primeira linha com 50px, segunda com 150px e terceira com 100px. A primeira coluna com 100px, a segunda 1fr e a terceira com 50px.

A sintaxe para grid-template-columns e grid-template-rows é a seguinte:

grid-template: 50px 100px / 1fr 2fr;

A primeira linha com 50px, segunda com 100px. Primeira coluna com 1fr e segunda com 2fr

Gap

column-gap
Define a distância entre as colunas (gap)

column-gap: 10px;

row-gap
Define a distância entre as linhas (gap)

row-gap: 50px;

gap
Define ao mesmo tempo a distância entre as colunas e linhas

gap: 50px;

Grid Auto

Manipula as propriedades do grid implícito

Grid Explicíto
São as linhas/colunas criadas manualmente, ou seja, nós podemos definir um número fixo de linhas e colunas formando um grid usando as propriedades grid-template-rows, grid-template-columns and grid-template-areas. Estes grids definidos manualmente são chamados de grid explícito

Grid Implícito
São as linhas/colunas criadas automaticamente, ou seja, células criadas automaticamente para preencher ou posicionar um elemento, quando as colunas/linhas não são definidas com grid-template, eles são chamados de grid implícito.

grid-auto-columns e grid-auto-rows
Define o tamanho das colunas/linhas do grid implícito (gerado automaticamente, quando algum elemento é posicionado em uma coluna que não foi definida).

grid-auto-columns: 100px;
grid-auto-rows: 100px;

grid-item com grid-column: 2; e grid-row: 6;

grid-auto-flow
Se você tem grid items que você não explicitamente colocou no grid, o algorito auto-placement entra em ação e coloca os itens no grid. A propriedade grid-auto-flow controle como o algorito de auto-placement funciona

grid-auto-flow: row; (padrão)
Preenche cada linha por vez, adicionando novas linhas caso necessário

grid-auto-flow: colum;
Preenche cada coluna por vez, adicionando novas colunas caso necessário

grid-auto-flow: dense / column dense / row dense;
Tenta posicionar o máximo de elementos que existirem nas primeiras partes do grid.

Observe que o dense apenas altera a ordem visual dos itens e pode gerar uma aparição fora de ordem, o que pode gerar problemas para acessibilidade.

Grid

Um atalho para definir todas as seguintes propriedades em uma única declaração: grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns e grid-auto-flow

grid: none
Define todas as propriedades com seu valor inicial/padrão

grid: <grid-template>
Funciona da mesma forma que o atalho grid-template

Ex.:

grid:
"logo nav nav" 50px
"main main main" 150px
"footer footer footer" 100px
/ 100px 1fr 50px;

grid: <grid-template-rows> / [auto-flow && dense] <grid-auto-columns>

Define grid-template-rows com um valor especifico (ex: 50px auto)
Se tiver auto-flow à direita da barra (/), define o grid-auto-flow como column. (ex: auto-flow)
Se a palavra-chave dense for especificada adicionalmente, o algoritmo de auto-posicionamento usa um algoritmo de empacotamento “dense”. (ex: dense)
Se grid-auto-columns da grade for omitido, ele será definido como auto. (ex: 100px)

grid: 50px auto / auto-flow dense 100px;

grid: [auto-flow && dense ] <grid-auto-rows>? / <grid-template-columns>

Se tiver a palavra chave auto-flow a esquerda da barra (/) define o grid-auto-flow com row
Se dense estiver especificado adicionalmente, o algorito de auto-posicionamento irá usar um posicionamento denso
Se o grid-auto-rows for omitido, será definido como auto
Define ao grid-template-columns um valor específico

Exemplos:

grid: 100px / 1fr 1fr;

Gera uma linha com 100px de altura e 2 colunas com 1fr.

grid: 100px / auto-flow 100px 50px

Gera uma linha com 100px de altura. O grid-auto-flow é definido como column (pois está logo antes da definição das colunas). Ele também define o grid-auto-columns com 100px 50px

Alinhando Grid ao Grid Container

As vezes o tamanho total do seu grid pode ser menor que o tamanho do grid-container. Isto pode acontecer caso o tamanho dos seus grid-items seja definido com unidades não flexíveis como px. Neste caso você pode definir o alinhamento do grid com seu grid container.

align-content
Alinha os itens do grid em relação ao eixo y (vertical).

align-content: start;
Alinha o grid ao topo do grid container
align-content: end;
Alinha o grid ao final do grid container
align-content: center;
Alinha o grid ao centro do grid container
align-content: strech;
Redimensiona os grid-items permitindo que ocupem todo o espaço do grid container
align-content: space-around;
Insere uma quantidade de espaço (x) ao lado de cada grid-item, resultando em 2x de espaço entre os grid-items e x nas bordas
align-content: space-between;
Insere a maior quantidade possível de espaço entre os grid-items, para deixar eles com a maior distância possível
align-content: space-evenly;
Insere a mesma quantidade de espaço (x) entre os grid-items, incluindo nas laterais (x)

justify-content
Justifica os itens do grid em relação ao eixo x (horizontal).

justify-content: start;
Alinha o grid a lateral inicial do grid container
justify-content: end;
Alinha o grid a lateral final do grid container
justify-content: center;
Alinha o grid ao centro do grid container
justify-content: strech;
Redimensiona os grid-items permitindo que ocupem todo o espaço do grid container
justify-content: space-around;
Insere uma quantidade de espaço (x) ao lado de cada grid-item, resultando em 2x de espaço entre os grid-items e x nas bordas
justify-content: space-between;
Insere a maior quantidade possível de espaço entre os grid-items, para deixar eles com a maior distância possível
space-evenly;
Insere a mesma quantidade de espaço (x) entre os grid-items, incluindo nas laterais (x)

place-content
É um atalho para as propriedades align-content e justify-content. O primeiro valor define o align-content e o segundo (depois da barra /) define o justify-content.

Obs.: Se o segundo valor for omitido, o primeiro valor será passado para as duas propriedades.

place-content: <align-content> / <justify-content>;
Ex:
place-content: end / start;

Alinhando Conteúdo dos Grid Items

align-items
Alinha o conteúdo dos itens do grid em relação ao eixo y (vertical). Alinhando em relação a sua célula do grid.

align-items: stretch; (padrão)
Preenche todo o espaço disponível da célula
align-items: start;
Alinha o conteúdo interno com o topo da sua célula
align-items: end;
Alinha o conteúdo interno com o final da sua célula
align-items: center;
Alinha o conteúdo interno com o centro da sua célula

justify-items
Justifica o conteúdo dos itens do grid em relação ao eixo x (horizontal). Justificando em relação a sua célula do grid.

justify-items: stretch; (padrão)
Preenche todo o espaço disponível da célula
justify-items: start;
Alinha o conteúdo interno com a lateral inicial da sua célula
justify-items: end;
Alinha o conteúdo interno com a lateral final da sua célula
justify-items: center;
Alinha o conteúdo interno com o centro da sua célula

place-items
É um atalho para as propriedades align-items e justify-items. O primeiro valor define o align-itemse o segundo (depois da barra /) define o justify-items.

Obs.: Se o segundo valor for omitido, o primeiro valor será passado para as duas propriedades.

place-content: <align-items> / <justify-items>;
Ex:
place-content: start / center;

Grid Item

As propriedades seguintes serão passadas diretamente aos grid-items, pois se referem a eles

Grid Column/Line Start e Grid Column/Line End

Define a coluna/linha de onde o grid-item começa e acaba

Valores:

<nome/numero-linha>- Pode ser o número da linha grid ou o nome da linha (quando definido)

grid-column-start: <numero-linha>;
Ex:
grid-column-start: 2;
 
grid-column-start: <nome-linha>;
Ex:
grid-column-start: col2;

span <número>- O grid-item irá se espalhar em um <número> de colunas/linhas a partir de onde estiver posicionado inicialmente

grid-column-end: span <numero>;
Ex:
grid-column-end: span 2;

span <nome-linha>- O grid-item irá se espalhar até encontrar a próxima <nome-linha>

grid-column-end: span <nome-linha>;
Ex:
grid-column-end: span col2;

Obs.: O mesmo resultado é alcançado usando span com grid-column-start ou grid-column-end, porém é interessante usá-lo no grid-column-end/grid-row-end, pois assim o grid-column-start/grid-row-start fica livre para definir onde o grid-item se posicionará inicialmente.

auto (padrão) - Indica um posicionamento automático, um intervalo automático ou um intervalo de um

grid-column-start: auto;

Grid Column e Grid Row

Atalho para grid-column-start + grid-column-end e grid-row-start + grid-row-end, respectivamente

grid-row: <linha-start> / <linha-end>;
Ex:
grid-row: linha2 / span 2;grid-column: <linha-start> / <linha-end>;
Ex:
grid-column: col2 / span 2;

Todos os valores usados anteriormente span, span <nome-linha>, <nome/numero-linha> podem ser usados nesse atalho também.

Grid Area

Posiciona o grid-item em uma area criada pelo grid-template-area.

grid-area: <nome-area>;
Ex:
grid-area: header;

Essa propriedade também pode ser usada como um atalho para grid-row-start + grid-column-start + grid-row-end+ grid-column-end; nessa ordem.

grid-area: <grid-row-start> / <grid-column-start> / <grid-row-end> / <grid-column-end>;
Ex:
grid-area: linha1 / col2 / span 2 / col4;

Alinhamento próprio

Propriedades passadas diretamente ao grid-item e alinham (verticalmente e horizontalmente) ele de acordo a sua célula

**justify-self:** center; e **align-self:** center;

justify-self
Alinha horizontalmente o grid-item de acordo com sua célula

justify-self: stretch; (padrão)
Estica o grid-item para preencher por completo a célula
justify-self: start;
Alinha o grid-item à esquerda (começo) da célula
justify-self: end;
Alinha o grid-item à direita (fim) da célula
justify-self: center;
Alinha o grid-item ao meio horizontal da célula

align-self
Alinha verticalmente o grid-item de acordo com sua célula

justify-self: stretch; (padrão)
Estica o grid-item para preencher por completo a célula
justify-self: start;
Alinha o grid-item a parte de cima da célula
justify-self: end;
Alinha o grid-item a parte de baixo da célula
justify-self: center;
Alinha o grid-item ao meio vertical da célula

place-self
Atalho para o justify-self e align-self

place-self: auto; (padrão)
Posicionamento padrão e automático do grid-item
place-self: <align-self> / <justify-self>;
Atalho para align-self e justify-self

place-self: center / center;

Este guia completo foi feito usando o seguinte CodePen, caso deseje testar as propriedades, acesse o link abaixo:
https://codepen.io/Skiiidrow/pen/JjWdvQY