---

Entendendo o grid container

O módulo Grid Layout oferece um sistema de layout baseado em grade, com linhas e colunas. Ele permite que desenvolvedores criem facilmente layouts web complexos e facilita o design de estruturas responsivas, sem a necessidade de usar float ou posicionamento manual. As propriedades de grade CSS são suportadas em todos os navegadores modernos, tornando o CSS Grid uma solução confiável para organizar o conteúdo de forma flexível e eficiente.

Detalhametno das propriedades do CSS Grid

1 Propriedade CSS Grid Container

O elemento <div> (ou qualquer outro elemento HTML) se torna um container de grade quando sua propriedade display é definida como grid ou inline-grid.

Um container de grade (grid container) organiza automaticamente seus elementos filhos diretos em uma estrutura de linhas e colunas, formando uma grade bidimensional.

Todos os filhos diretos do container passam a ser reconhecidos como itens de grade (grid items), podendo então ser posicionados e dimensionados de forma precisa com base nas regras definidas pelo CSS Grid.

Exemplo:

2 Propriedadse grid-template-columns

No CSS Grid, uma das primeiras etapas é definir as colunas da grade com a propriedade grid-template-columns. Essa propriedade permite especificar quantas colunas a grade terá e qual será a largura de cada uma.

Com grid-template-columns, é possível definir os comprimentos exatos das colunas, combinando unidades de medida fixas e automáticas. Os tamanhos podem ser declarados em qualquer unidade CSS válida, como px, %, em, entre outras.

Além disso, o CSS Grid introduz a unidade fr, que significa fração. Essa unidade distribui automaticamente o espaço disponível entre as colunas, proporcionalmente ao valor indicado. Por exemplo, ao definir 1fr 2fr, a segunda coluna receberá o dobro do espaço da primeira. Essa abordagem torna o layout mais flexível e responsivo.

Exemplo (Editavel no codepen)

No exemplo acima temos a demonstração do uso do CSS Grid grid-template-columns

Esses códigos usam CSS Grid para criar layouts de colunas. A propriedade display: grid ativa o sistema de grade, e a grid-template-columns define como as colunas serão divididas.

A unidade fr representa uma “fração” do espaço disponível, permitindo criar colunas flexíveis.

grid-template-columns: 500px 1fr 2fr;

Este código cria três colunas:

• A primeira tem uma largura fixa de 500px.
• O espaço restante é dividido em três partes. A segunda coluna (1fr) ocupa uma parte, e a terceira (2fr) ocupa duas partes (o dobro da segunda).

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

Cria três colunas de largura idêntica. O espaço total é dividido igualmente entre elas.

grid-template-columns: repeat(3, 1fr);

Faz exatamente a mesma coisa que o .gridContainer2: cria três colunas de largura igual. A função repeat() é apenas uma forma mais curta e eficiente de escrever o código, significando “repita 3 vezes a coluna de 1fr”.

grid-template-columns: 100px repeat(6, 1fr) 20px;

Este código cria um layout complexo de oito colunas:

• A última coluna tem uma largura fixa de 20px.
• A primeira coluna tem uma largura fixa de 100px.
• As seis colunas do meio (repeat(6, 1fr)) dividem o espaço restante igualmente entre si.

---

3 Propriedadse grid-template-rows

A propriedade grid-template-rows é usada para definir a estrutura das linhas dentro de um container de grade.

Assim como grid-template-columns controla as colunas, grid-template-rows permite especificar quantas linhas a grade terá e qual será a altura de cada uma.

Os valores podem ser definidos utilizando qualquer unidade de medida válida em CSS, como px, %, em ou a unidade fracionária fr. Também é possível combinar diferentes tipos de unidades para obter um controle mais preciso ou adaptativo.

Cada valor definido representa a altura de uma linha na ordem em que aparecem. Por exemplo, grid-template-rows: 100px 1fr 2fr define uma grade com três linhas: a primeira com 100 pixels de altura, a segunda ocupando uma fração do espaço restante, e a terceira ocupando o dobro da segunda.

Exemplo (Editavel no codepen)

No exemplo acima temos a demonstração do uso do CSS Grid grid-template-rows

 grid-template-rows: auto;

• Define 1 única linha com altura automática.
• A altura da linha será exatamente a necessária para acomodar o conteúdo dessa linha.

 grid-template-rows: 60px 10em 60px;

• Define 3 linhas fixas:
  • 1ª linha: 60px (altura fixa de 60 pixels)
  • 2ª linha: 10em (altura baseada no tamanho da fonte; 1em = altura da fonte atual)
  • 3ª linha: 60px (altura fixa novamente)

 grid-template-rows: 1fr 2fr 1fr;

• Define 3 linhas proporcionais com a unidade fr (fractional unit).
• A altura total disponível será dividida em partes:
  • 1ª linha: 1 parte
  • 2ª linha: 2 partes (o dobro das outras)
  • 3ª linha: 1 parte

 grid-template-rows: 6ch auto minmax(10px, 60px);

• Define 3 linhas com regras diferentes:
  • 1ª linha: 6ch → altura baseada na largura de 6 caracteres “0”
  • 2ª linha: auto → ajusta-se ao conteúdo
  • 3ª linha: minmax(10px, 60px) → varia entre 10px e 60px

---

4. Propriedade grid-template-areas

A propriedade grid-template-areas permite definir áreas nomeadas dentro de um container de grade, facilitando o posicionamento dos itens de forma visualmente mais intuitiva e organizada.

Com essa propriedade, é possível declarar regiões específicas do layout por meio de nomes atribuídos a diferentes partes da grade. Os elementos filhos podem então ser posicionados nessas áreas nomeadas utilizando a propriedade grid-area.

Essa abordagem torna o layout mais legível e declarativo, especialmente útil em estruturas complexas, como cabeçalhos, barras laterais e rodapés.

Este código usa CSS Grid para criar o layout de uma página da web de forma visual e intuitiva.

A propriedade grid-template-areas no body desenha um “mapa” do layout da sua página. Cada palavra entre aspas representa uma célula da grade, e o nome que você dá a ela é a “área” da grade.

Exemplo (Editavel no codepen)

No exemplo acima temos uma demonstração do uso do CSS Grid grid-template-areas combiando com o grid-area.

O Mapa da Página (grid-template-areas)

grid-template-areas:
  "header header header header"
  "section main main main"
  "footer footer footer footer";

Este código define uma grade com 3 linhas e 4 colunas:

• Linha 1: A área header ocupa todas as quatro colunas.
• Linha 2: A área section ocupa a primeira coluna, e a área main ocupa as três colunas restantes.
• Linha 3: A área footer ocupa todas as quatro colunas.

Visualmente, o layout fica assim:

• | header | header | header | header |
• | section| main | main | main |
• | footer | footer | footer | footer |

Posicionando os Elementos (grid-area) (Esse é uma Propriedades do Grid Item)

header { grid-area: header; }
main { grid-area: main; }
section { grid-area: section; }
footer { grid-area: footer; }

A propriedade grid-area simplesmente “encaixa” cada elemento HTML (como <header>, <main>, etc.) na área correspondente que foi definida no mapa do grid-template-areas.

Em resumo, o código cria um layout clássico de site:

• Um cabeçalho (header) que ocupa toda a largura no topo.
• Uma seção (section) que funciona como uma barra lateral à esquerda.
• O conteúdo principal (main) que ocupa a maior parte do espaço central.
• Um rodapé (footer) que ocupa toda a largura na parte inferior.

---

5. Propriedade grid-template

A propriedade abreviada grid-template combina, em uma única declaração, as configurações de grid-template-rows, grid-template-columns e grid-template-areas, permitindo definir toda a estrutura da grade de forma compacta e legível.

Essa propriedade é especialmente útil quando se deseja declarar, simultaneamente, a disposição das áreas nomeadas e os tamanhos das linhas e colunas do layout.

Exemplo (Editavel no codepen)

No exemplo acima temos uma demonstração do uso do CSS Grid `grid-template`.

Neste exemplo, o layout do grid-template-areas foi reescrito usando o `grid-template`. Este código usa a propriedade grid-template, que é um atalho para definir o layout completo de uma grade (áreas, altura das linhas e largura das colunas) de uma só vez.

A sintaxe é dividida em duas partes, separadas por uma barra (/).

"header header header" 120px
"section main main"   1fr
"footer footer footer" 70px

1. Definição das Linhas (Áreas e Alturas):CSS
   • Linha 1: Cria uma área chamada header que ocupa as três colunas e define a altura desta linha como 120px fixos.
   • Linha 2: Cria uma área section na primeira coluna e uma área main que ocupa as duas colunas seguintes. A altura desta linha é 1fr, significando que ela vai ocupar todo o espaço vertical que sobrar.
   • Linha 3: Cria uma área footer que ocupa as três colunas e define a altura desta linha como 70px fixos.

/ 200px 1fr;

1. Definição das Colunas (Larguras):CSS / 200px 1fr;
   • A barra (/) indica que a seguir vêm as larguras das colunas.
   • Coluna 1: Terá uma largura fixa de 200px. (Esta é a coluna da section).
   • Colunas 2 e 3: O 1fr se aplica às colunas restantes. Como o layout tem três colunas (header header header), e só duas larguras foram definidas (200px e 1fr), a última (1fr) é repetida. Isso significa que as colunas 2 e 3 vão dividir igualmente o espaço horizontal que sobrar após os 200px da primeira coluna serem aplicados.

---

6. Propriedade grid-auto-rows

A propriedade grid-auto-rows é utilizada para definir a altura padrão das linhas que são geradas automaticamente em um container de grade, quando essas linhas não foram explicitamente definidas com grid-template-rows.

Essa propriedade é particularmente útil em layouts dinâmicos, onde o número de linhas pode variar conforme o conteúdo inserido. Quando novos itens extrapolam o número de linhas definidas, o CSS Grid cria linhas adicionais automaticamente, e grid-auto-rows determina a altura dessas linhas extras.

É possível usar qualquer unidade CSS válida, como px, em, % ou fr.

Exemplo (Editavel no codepen)

No exemplo acima temos uma demonstração do uso do CSS Grid ``**`grid-auto-rows`**``.

Esses códigos controlam a altura e a direção de linhas e colunas criadas automaticamente em um layout de grade (a “grade implícita”).

A propriedade grid-auto-rows define a altura de qualquer linha que o navegador cria automaticamente. Já grid-auto-flow define se os novos itens devem criar novas colunas (column) ou novas linhas (row).

grid-auto-flow: column;
grid-auto-rows: minmax(30px, 150px);

Aqui, o fluxo de itens é horizontal (column). A propriedade grid-auto-rows define que, se alguma nova linha for criada implicitamente (por exemplo, se um item for posicionado manualmente em uma nova linha), essa linha terá uma altura flexível.

• minmax(30px, 150px): Garante que a linha terá no mínimo 30px e no máximo 150px de altura.

grid-auto-flow: column;
grid-auto-rows: 33.3%;

O fluxo de itens é horizontal (column). Se uma nova linha for criada automaticamente, sua altura será de um terço da altura total do contêiner.

• grid-auto-rows: 33.3%: A altura da linha será um terço (33.3%) da altura do contêiner pai.

grid-auto-flow: row;
grid-auto-rows: 33.3%;

O fluxo de itens é vertical (row), criando novas linhas conforme necessário.

• grid-auto-flow: row: Direciona o fluxo para preencher linhas (comportamento padrão).
• grid-auto-rows: 33.3%: Cada nova linha criada automaticamente terá um terço (33.3%) da altura do contêiner.

grid-auto-flow: column;
grid-auto-rows: min-content;

O fluxo de itens é horizontal (column). Se uma nova linha for criada automaticamente, sua altura será definida pelo conteúdo dentro dela.

• grid-auto-rows: min-content: A altura da linha será a mínima necessária para caber o elemento mais alto dentro dela.

grid-auto-flow: row;
grid-auto-rows: min-content;

O fluxo de itens é vertical (row), criando novas linhas.

• grid-auto-flow: row: O fluxo é por linhas.
• grid-auto-rows: min-content: Cada nova linha criada automaticamente será apenas alta o suficiente para conter o seu elemento mais alto.

---

7. Propriedade grid-auto-columns

A propriedade grid-auto-columns funciona de forma semelhante à grid-auto-rows, mas em vez de controlar linhas, ela define a largura padrão das colunas que são geradas automaticamente em um container de grade, quando essas colunas não foram explicitamente declaradas com grid-template-columns.

Essa propriedade é útil em situações onde o layout em grade gera colunas adicionais dinamicamente — por exemplo, quando há mais itens do que colunas definidas, ou quando o fluxo da grade (grid-auto-flow) está configurado no sentido da linha (row).

É possível especificar a largura padrão usando qualquer unidade de medida válida em CSS, como px, %, em ou fr. Por exemplo:

Exemplo (Editavel no codepen)

🔰 No exemplo acima temos uma demonstração do uso do CSS Grid ``**`grid-auto-columns`**``.

Este conjunto de exemplos demonstra como a propriedade grid-auto-columns controla a largura das colunas criadas automaticamente (colunas implícitas) em um container com display: grid. Esse comportamento é ativado quando os itens excedem o número de colunas explicitamente definidas no layout principal.

A propriedade grid-auto-flow determina a direção do fluxo automático dos itens (em linhas ou colunas). Já grid-auto-columns define a largura padrão que essas colunas implícitas terão ao serem geradas pelo navegador.

🧩 Exemplos e Explicações

✅ grid-auto-flow: column;

grid-auto-columns: minmax(10px, 250px);

• Os itens são adicionados horizontalmente, criando novas colunas implícitas.
• grid-auto-columns: minmax(10px, 250px): cada nova coluna terá largura flexível, entre 10px e 250px, ocupando o maior espaço possível até esse limite.

✅ grid-auto-flow: column;

grid-auto-columns: 33.3%;

• O fluxo automático segue na direção das colunas.
• grid-auto-columns: 33.3%: cada nova coluna criada ocupará um terço da largura do container pai.

✅ grid-auto-flow: row;

grid-auto-columns: 33.3%;

• O fluxo segue o padrão, adicionando os itens em linhas.
• grid-auto-columns: 33.3%: só entra em ação se o navegador precisar criar uma coluna implícita — por exemplo, se um item ocupar uma posição fora da grade definida. Nesse caso, a nova coluna terá 33.3% da largura.

✅ grid-auto-flow: column;

grid-auto-columns: min-content;

• O fluxo é horizontal, com colunas implícitas sendo criadas.
• grid-auto-columns: min-content: cada coluna terá a menor largura possível para conter seu conteúdo sem quebra — ideal para conteúdo com tamanho variável.

✅ grid-auto-flow: row;

grid-auto-columns: min-content;

• O fluxo é em linhas, comportamento padrão.
• grid-auto-columns: min-content: também só terá efeito se colunas implícitas forem necessárias. Essas colunas terão largura baseada no conteúdo mínimo necessário.

---

8. Propriedade grid-auto-flow

A propriedade grid-auto-flow define a direção automática de posicionamento dos itens de grade dentro de um container de grid, especialmente quando suas posições não são especificadas manualmente.

Com ela, é possível controlar se os itens fluem automaticamente em linhas (padrão) ou em colunas, conforme o espaço disponível na grade.

Os valores mais comuns são:

row dense ou column dense: ativa o comportamento denso, que tenta preencher os espaços vazios antecipadamente, otimizando o uso da grade, mesmo que isso altere a ordem visual dos elementos.

row (padrão): os itens são posicionados automaticamente em linhas sucessivas, preenchendo da esquerda para a direita e, em seguida, passando para a próxima linha.

column: os itens fluem em colunas sucessivas, preenchendo de cima para baixo e depois passando para a próxima coluna.

Exemplo (Editavel no codepen)

🔰 No exemplo acima temos uma demonstração do uso do CSS Grid grid-auto-flow

Este código demonstra como a propriedade grid-auto-flow controla a direção e o comportamento de preenchimento automático dos itens em um container grid. Dependendo da configuração, os itens podem ser distribuídos linha por linha, coluna por coluna ou até mesmo reorganizados para aproveitar melhor o espaço disponível.
Os exemplos abaixo mostram como essa propriedade se comporta em diferentes cenários.

🔹 grid-auto-flow: row;

Comportamento:
Os itens são adicionados automaticamente na direção das linhas (da esquerda para a direita e de cima para baixo), seguindo a ordem em que aparecem no HTML.
➡️ Fluxo padrão horizontal, preenchendo linha por linha.

🔹 .grid-auto-flow: row dense

Comportamento:
Igual ao anterior (itens fluem em linhas), porém com o modificador dense, que permite ao navegador reorganizar os itens para preencher lacunas disponíveis, quando possível.
➡️ Tenta otimizar o uso do espaço, rearranjando itens menores para evitar buracos na malha.

🔹 .grid-auto-flow: dense

Comportamento:
Como grid-auto-flow: row dense é o valor implícito, o fluxo é em linhas com comportamento denso.
➡️ Itens seguem a direção das linhas, com tentativa de preenchimento inteligente de espaços livres.

🔹 .grid-auto-flow: column

Comportamento:
Os itens são dispostos na direção das colunas (de cima para baixo e da esquerda para a direita).
➡️ Fluxo vertical, preenchendo coluna por coluna na ordem dos elementos no HTML.

🔹 .grid-auto-flow: column dense

Comportamento:
Mesma direção vertical (column), mas com o modificador dense, permitindo o reaproveitamento de espaços vazios na malha vertical.
➡️ Itens fluem de cima para baixo e podem ser rearranjados para melhor aproveitamento do espaço.

---

9. justify-items

A propriedade justify-items é usada para alinhar horizontalmente os itens (elementos filhos) dentro das células de uma grade (grid). Ela permite definir como os itens se comportam em relação ao eixo horizontal da célula da grade.

Exemplo (Editavel no codepen)

🔰 No exemplo acima temos uma demonstração do uso do CSS Grid justify-items

Os exemplos a seguir demonstram o uso da propriedade justify-items, que define como os itens filhos são alinhados horizontalmente dentro de suas próprias células em um container com display: grid.

Essa propriedade afeta o alinhamento interno de cada item individual em relação aos limites da célula da grade (não ao grid como um todo). É especialmente útil quando os itens não ocupam toda a largura disponível da célula.

🧩 Exemplos e Explicações

✅ justify-items: start;

• Os itens são alinhados à esquerda de suas células.
• Útil para manter os conteúdos alinhados ao início horizontal da célula.

✅ justify-items: end;

• Os itens são alinhados à direita de suas células.
• Ideal para conteúdos que devem ser posicionados no final horizontal de cada célula.

✅ justify-items: center;

• Os itens são centralizados horizontalmente dentro de suas células.
• Garante equilíbrio visual em layouts onde a simetria é desejada.

✅ justify-items: stretch; (valor padrão)

• Os itens são esticados para preencher toda a largura disponível da célula, respeitando suas restrições de tamanho (width, min-width, etc.).
• Ideal para layouts responsivos ou componentes com largura variável.

---

10. align-items

A propriedade align-items é usada para alinhar verticalmente os itens (elementos filhos) dentro das células de uma grade (grid). Ela permite definir como os itens se comportam em relação ao eixo vertical da célula da grade.

Exemplo (Editavel no codepen)

🔰 No exemplo acima temos uma demonstração do uso do CSS Grid align-items

A propriedade align-items define como os itens filhos são alinhados verticalmente dentro de suas próprias células em um container com display: grid.

Ela controla o posicionamento interno de cada item em relação aos limites superiores e inferiores da célula (não do grid como um todo). É útil para ajustar a altura ou o alinhamento vertical dos elementos, especialmente quando eles não ocupam toda a altura disponível.

🧩 Exemplos e Explicações

✅ align-items: start;

Os itens são alinhados ao topo da célula.

Útil quando se deseja que o conteúdo fique ancorado na parte superior.

✅ align-items: center;

Os itens são centralizados verticalmente dentro da célula.

Garante um equilíbrio visual quando os elementos precisam estar no centro.

✅ align-items: end;

Os itens são alinhados à base (parte inferior) da célula.

Ideal quando o conteúdo deve estar fixo na parte inferior.

✅ align-items: stretch; (valor padrão)

Os itens são esticados para ocupar toda a altura disponível da célula, respeitando suas restrições de tamanho (height, min-height, etc.).

Muito útil em layouts flexíveis, garantindo que os itens preencham verticalmente o espaço disponível.

11. justify-content

A propriedade justify-content é usada para alinhar horizontalmente as células da grade (grid cells) dentro do contêiner da grade (grid container). Ela controla o alinhamento dos grupos de células da grade em relação ao eixo horizontal do contêiner da grade.

Exemplo (Editavel no codepen)

🔰 No exemplo acima temos uma demonstração do uso do CSS Grid justify-content

A propriedade justify-content define como o conjunto de linhas ou colunas da grade (o conteúdo do grid como um todo) é distribuído horizontalmente dentro do container com display: grid.

Ela controla o alinhamento do grid inteiro em relação ao espaço disponível do container, e não o posicionamento individual de cada item. É especialmente útil quando o tamanho do grid é menor que a largura do container.

---

🧩 Exemplos e Explicações

✅ justify-content: start;

Todo o conteúdo do grid é alinhado ao lado esquerdo do container.

Ideal para layouts onde o conteúdo precisa começar no início horizontal.

---

✅ justify-content: end;

Todo o conteúdo do grid é alinhado ao lado direito do container.

Útil para posicionar grades no final do espaço disponível.

---

✅ justify-content: center;

O conteúdo do grid é centralizado horizontalmente no container.

Proporciona equilíbrio visual quando o grid não ocupa toda a largura.

---

✅ justify-content: space-between;

As colunas ou linhas são distribuídas de modo que o primeiro item fique encostado à esquerda, o último encostado à direita, e os demais se distribuam igualmente no espaço entre eles.

Bom para criar espaçamentos uniformes sem margens laterais.

---

✅ justify-content: space-around;

Os itens do grid são distribuídos com espaçamentos iguais entre eles e também com espaçamento nas bordas laterais, porém esse espaçamento é metade do que há entre os itens.

Útil quando se deseja um respiro nas extremidades.

---

✅ justify-content: space-evenly;

Os itens são distribuídos com espaçamentos iguais entre eles e também nas extremidades laterais.

Ideal para garantir espaçamento uniforme e harmônico.

12. align-content

A propriedade align-content é usada para alinhar verticalmente os grupos de células da grade (grid cells) dentro do contêiner da grade (grid container). Ela controla o alinhamento dos grupos de células da grade em relação ao eixo vertical do contêiner da grade.

Essa propriedade só tem efeito quando há espaço vertical extra no container — ou seja, quando a altura total das linhas do grid é menor que a altura do container.

Exemplo (Editavel no codepen)

See the Pen align-content by msdicas (@msdicas) on CodePen.

🔰 No exemplo acima temos uma demonstração do uso do CSS Grid align-content

A propriedade align-content define como o conjunto de linhas da grade (o conteúdo do grid como um todo) é distribuído verticalmente dentro do container com display: grid.

Ela controla o alinhamento do grid inteiro em relação ao espaço disponível verticalmente no container, e não o posicionamento individual de cada item.

---

🧩 Exemplos e Explicações

✅ align-content: start;

• Todo o conteúdo do grid é alinhado ao topo do container.
• Ideal para layouts onde o conteúdo deve começar na parte superior.

✅ align-content: end;

• Todo o conteúdo do grid é alinhado à parte inferior do container.
• Útil para posicionar grades no final do espaço vertical disponível.

✅ align-content: center;

• O conteúdo do grid é centralizado verticalmente no container.
• Proporciona equilíbrio visual quando o grid não ocupa toda a altura.

✅ align-content: space-between;

• As linhas são distribuídas de modo que a primeira linha fique no topo, a última na base, e as demais se distribuam igualmente no espaço entre elas.

✅ align-content: space-around;

• As linhas são distribuídas com espaçamentos iguais entre elas e também com espaçamento nas bordas superior e inferior, porém esse espaçamento é metade do que há entre as linhas.

✅ align-content: space-evenly;

• As linhas são distribuídas com espaçamentos iguais entre elas e também nas extremidades superior e inferior.
• Ideal para garantir espaçamento uniforme e harmônico verticalmente.

---

13. gap / row-gap / column-gap

As propriedades gap, row-gap e column-gap controlam o espaçamento entre as células do grid, permitindo criar espaçamentos uniformes entre as linhas e colunas sem a necessidade de usar margens nos elementos.

Essas propriedades são especialmente úteis para criar layouts limpos e organizados, pois aplicam espaçamento de forma consistente em toda a grade.

Sintaxe

• gap: propriedade abreviada que define o espaçamento tanto entre linhas quanto entre colunas
• row-gap: define apenas o espaçamento entre as linhas
• column-gap: define apenas o espaçamento entre as colunas

Exemplo (Editavel no codepen)

See the Pen gap-properties by msdicas (@msdicas) on CodePen.

🔰 No exemplo acima temos uma demonstração do uso das propriedades gap, row-gap e column-gap

🧩 Exemplos e Explicações

✅ gap: 20px;

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

• Define um espaçamento de 20px tanto entre linhas quanto entre colunas.
• É a forma mais comum e simples de adicionar espaçamento uniforme.

✅ gap: 20px 40px;

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px 40px;
}

• Define 20px de espaçamento entre linhas e 40px entre colunas.
• Permite controle diferenciado entre os dois eixos.

✅ row-gap: 30px;

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  row-gap: 30px;
}

• Define apenas o espaçamento vertical entre as linhas (30px).
• Não afeta o espaçamento entre colunas.

✅ column-gap: 50px;

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 50px;
}

• Define apenas o espaçamento horizontal entre as colunas (50px).
• Não afeta o espaçamento entre linhas.

✅ Combinando row-gap e column-gap

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  row-gap: 15px;
  column-gap: 25px;
}

• Oferece controle granular sobre ambos os espaçamentos separadamente.
• Equivalente a gap: 15px 25px;.

---

Propriedades do Grid Item:

1. grid-column

A propriedade grid-column é usada no CSS Grid para controlar a colocação horizontal de um item (elemento filho) dentro de uma célula de grade (grid cell) no layout em grade. Ela permite definir em qual coluna da grade o item deve começar e onde deve terminar.

Exemplo (Editavel no codepen)

See the Pen grid-column by msdicas (@msdicas) on CodePen.

🔰 No exemplo acima temos uma demonstração do uso do CSS Grid grid-column

A propriedade grid-column define a posição horizontal de um item dentro da grade, especificando em qual coluna ele começa e termina.

✅ grid-column: 1 / 3;

• O item começa na linha de coluna 1 e termina na linha de coluna 3, ocupando 2 colunas.

✅ grid-column: span 2;

• O item ocupa 2 colunas a partir de sua posição inicial.

---

2. grid-row

A propriedade grid-row é usada no CSS Grid para controlar a colocação vertical de um item (elemento filho) dentro de uma célula de grade (grid cell) no layout em grade. Ela permite definir em qual linha da grade o item deve começar e onde deve terminar.

Exemplo (Editavel no codepen)

See the Pen grid-row by msdicas (@msdicas) on CodePen.

🔰 No exemplo acima temos uma demonstração do uso do CSS Grid grid-row

A propriedade grid-row define a posição vertical de um item dentro da grade, especificando em qual linha ele começa e termina.

✅ grid-row: 1 / 4;

• O item começa na linha 1 e termina na linha 4, ocupando 3 linhas.

✅ grid-row: span 3;

• O item ocupa 3 linhas a partir de sua posição inicial.

---

3. grid-area

Com essa propriedade, você pode atribuir um item de grade a uma área nomeada no grid definida pelo grid-template-areas. Ela também pode ser usada como uma propriedade abreviada, isso significa que ela pode substituir as propriedades grid-row e grid-column, recebendo seus valores.

Exemplo (Editavel no codepen)

See the Pen grid-area by msdicas (@msdicas) on CodePen.

🔰 No exemplo acima temos uma demonstração do uso do CSS Grid grid-area

✅ Usando áreas nomeadas:

.item { grid-area: header; }

✅ Como propriedade abreviada:

.item { 
  /* grid-row-start / grid-column-start / grid-row-end / grid-column-end */
  grid-area: 1 / 1 / 3 / 4; 
}

---

4. justify-self

A propriedade justify-self é usada para alinhar horizontalmente um item (elemento filho) dentro de sua célula de grade (grid cell). Ela permite que você controle o posicionamento horizontal de um item individual em relação à sua célula da grade.

Exemplo (Editavel no codepen)

See the Pen justify-self by msdicas (@msdicas) on CodePen.

🔰 No exemplo acima temos uma demonstração do uso do CSS Grid justify-self

✅ justify-self: start;

• Alinha o item à esquerda de sua célula.

✅ justify-self: center;

• Centraliza o item horizontalmente em sua célula.

✅ justify-self: end;

• Alinha o item à direita de sua célula.

✅ justify-self: stretch;

• Estica o item para preencher toda a largura da célula.

---

5. align-self

A propriedade align-self é usada para alinhar verticalmente um item (elemento filho) dentro de sua célula de grade (grid cell). Ela permite que você controle o posicionamento vertical de um item individual em relação à sua célula da grade.

Exemplo (Editavel no codepen)

See the Pen align-self by msdicas (@msdicas) on CodePen.

🔰 No exemplo acima temos uma demonstração do uso do CSS Grid align-self

✅ align-self: start;

• Alinha o item ao topo de sua célula.

✅ align-self: center;

• Centraliza o item verticalmente em sua célula.

✅ align-self: end;

• Alinha o item à base de sua célula.

✅ align-self: stretch;

• Estica o item para preencher toda a altura da célula.

---

6. place-self

A propriedade place-self é uma propriedade abreviada que recebe os valores que podem ser atribuídos às propriedades justify-self e align-self.

Exemplo (Editavel no codepen)

See the Pen place-self by msdicas (@msdicas) on CodePen.

🔰 No exemplo acima temos uma demonstração do uso do CSS Grid place-self

✅ place-self: center;

• Centraliza o item vertical e horizontalmente (equivale a align-self: center; justify-self: center;).

✅ place-self: start end;

• Alinha o item ao topo e à direita (primeiro valor = vertical, segundo = horizontal).

---

7. order

A propriedade order permite que você controle a ordem de exibição dos itens de grade em relação aos outros itens. Itens com valores menores são exibidos primeiro.

Exemplo (Editavel no codepen)

See the Pen order by msdicas (@msdicas) on CodePen.

🔰 No exemplo acima temos uma demonstração do uso do CSS Grid order

.item1 { order: 2; }
.item2 { order: 1; }
.item3 { order: 3; }

• Os itens serão exibidos na ordem: item2, item1, item3.
• O valor padrão é 0. Valores negativos são permitidos.

---

Conclusão

O CSS Grid representa uma das maiores evoluções no desenvolvimento de layouts web, oferecendo um modelo bidimensional que proporciona controle preciso sobre a distribuição de elementos. Com a compreensão e uso correto das propriedades abordadas neste guia, é possível construir interfaces modernas, responsivas e semântico-visuais de maneira muito mais eficiente e organizada. Aproveite o poder do Grid para elevar o nível dos seus projetos web.

Referências

• CSS Grid Layout Module – W3C
• MDN Web Docs – CSS Grid
• A Complete Guide to Grid – CSS-Tricks
• Layout Land (YouTube – Rachel Andrew & Jen Simmons)
• Can I use – CSS Grid

Essas fontes complementam os conceitos apresentados e oferecem conteúdos atualizados, exemplos práticos e casos de uso do CSS Grid na construção de layouts profissionais.