🏁 Grid (display: grid)

O CSS Grid Layout é um sistema de layout bidimensional (linhas e colunas), projetado para simplificar a criação de layouts complexos. Ele transforma um elemento em um contêiner de grid e seus filhos diretos em itens de grid.

Para começar, aplique display: grid; ao elemento pai (o contêiner).

1. Propriedades do Contêiner Grid (o Pai)

`grid-template-columns` e `grid-template-rows`

Definem o número e o tamanho das colunas e linhas do grid. A unidade fr (fração) é muito útil para distribuir o espaço disponível de forma proporcional.

.container {
    display: grid;
    /* Três colunas: a segunda tem o dobro da largura das outras */
    grid-template-columns: 1fr 2fr 1fr;
    /* Duas linhas de altura automática */
    grid-template-rows: auto auto;
}

`gap` (ou `grid-gap`)

Define o espaçamento (calha) entre as linhas e colunas do grid.

.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px; /* 10px de espaço entre linhas e colunas */
    /* gap: 20px 10px; -> 20px entre linhas, 10px entre colunas */
}

`justify-items` e `align-items`

Alinham o conteúdo dentro de cada célula do grid. justify-items alinha no eixo horizontal e align-items no eixo vertical.

.container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center; /* Alinha verticalmente no centro */
    justify-items: end; /* Alinha horizontalmente no final */
}

2. Propriedades dos Itens Grid (os Filhos)

`grid-column` e `grid-row`

Permitem que um item se estenda por múltiplas colunas ou linhas. Você pode especificar a linha/coluna de início e de fim.

.item-destaque {
    /* Começa na linha de coluna 1 e vai até a 4 (ocupa 3 colunas) */
    grid-column: 1 / 4;
    /* Começa na linha de linha 1 e vai até a 2 (ocupa 1 linha) */
    grid-row: 1 / 2;
}

`justify-self` e `align-self`

Alinham um item individual dentro de sua célula, sobrescrevendo o alinhamento definido no contêiner (`justify-items` e `align-items`).

.item-especial {
    justify-self: center; /* Centraliza este item horizontalmente */
    align-self: start; /* Alinha este item no topo verticalmente */
}