Grid Layout

O CSS Grid Layout é uma poderosa ferramenta para criar layouts bidimensionais na web, permitindo organizar elementos em linhas e colunas de forma simples e flexível.

Como funciona o Grid?

O Grid transforma um container em uma "grade". Os elementos filhos desse container podem ser posicionados em qualquer célula da grade, facilitando a criação de layouts complexos sem precisar de floats ou posicionamento manual.

Exemplo básico

Veja como criar um grid simples com três colunas:

.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
}

<div class="container">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
    <div>Item 4</div>
</div>

No exemplo acima, o container terá três colunas de tamanhos iguais e espaçamento de 16px entre os itens.

Principais propriedades do Grid

• display: grid: ativa o grid no container.
• grid-template-columns: define o número e tamanho das colunas.
• grid-template-rows: define o número e tamanho das linhas.
• gap: define o espaçamento entre linhas e colunas.
• grid-column e grid-row: posicionam os itens em colunas/linhas específicas.

Posicionando itens

Você pode posicionar um item em uma coluna ou linha específica usando as propriedades grid-column e grid-row:

.item-destaque {
    grid-column: 1 / 3; /* Ocupa da coluna 1 até antes da 3 */
    grid-row: 1;
}

Layout responsivo com Grid

O Grid facilita a criação de layouts responsivos. Por exemplo, usando repeat e minmax:

.container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

Assim, o número de colunas se ajusta automaticamente ao tamanho da tela.

Conclusão

O CSS Grid Layout é uma solução moderna e eficiente para criar layouts flexíveis e responsivos. Experimente usar Grid em seus projetos para simplificar o desenvolvimento de páginas web!