CSS Grid

Tempo de leitura: 3 minutos

O CSS Grid Layout (ou simplesmente “Grid”) é um sistema bidimensional de layout que revoluciona a maneira como projetamos interfaces de usuário na web. Antes do Grid, criar layouts complexos era uma tarefa desafiadora e muitas vezes envolvia hacks e soluções pouco elegantes. Com o Grid, podemos criar estruturas flexíveis e responsivas com facilidade.

Neste artigo, exploraremos os principais conceitos do CSS Grid e forneceremos exemplos práticos.

O que é o CSS Grid?

O CSS Grid Layout é um sistema de layout bidimensional que permite organizar elementos em linhas e colunas. Ele funciona tanto para layouts simples quanto para designs mais complexos. Com o Grid, podemos criar grades flexíveis e alinhadas, distribuir espaço automaticamente e controlar a posição dos elementos.

Propriedades Fundamentais

display: grid

Para criar um grid, definimos um elemento como um “grid container” usando a propriedade display: grid. Isso estabelece um novo contexto de formatação para os elementos filhos dentro desse container.

.container {
    display: grid;
}

grid-template-columns e grid-template-rows

As propriedades grid-template-columns e grid-template-rows definem as colunas e linhas do grid, respectivamente. Podemos especificar os tamanhos das trilhas (ou “tracks”) usando valores como comprimentos, porcentagens ou frações.

.container {
    grid-template-columns: 1fr 2fr 1fr; /* Três colunas com proporções 1:2:1 */
    grid-template-rows: 100px auto 1fr; /* Três linhas com alturas fixa, automática e flexível */
}

Dimensões Automáticas

As dimensões automáticas permitem que o Grid distribua o espaço disponível de forma inteligente. Por exemplo, se não especificarmos uma largura para uma coluna, ela se ajustará automaticamente para preencher o espaço restante.

.container {
    grid-template-columns: 1fr auto; /* A primeira coluna ocupa 1/3 do espaço, a segunda se ajusta automaticamente */
}

Dimensões Diferentes para Colunas e Linhas

Podemos definir tamanhos diferentes para colunas e linhas usando valores diferentes nas propriedades grid-template-columns e grid-template-rows.

.container {
    grid-template-columns: 100px 2fr 1fr; /* Três colunas com larguras fixa, flexível e automática */
    grid-template-rows: 50px 1fr; /* Duas linhas com altura fixa e flexível */
}

Espaçamento entre Células

Podemos adicionar espaçamento entre as células do grid usando a propriedade gap. Isso cria um espaço entre as colunas e linhas adjacentes.

.container {
    grid-gap: 10px; /* Espaçamento de 10 pixels entre as células */
}

Itens em Múltiplas Colunas e/ou Linhas

Podemos fazer um item ocupar várias colunas e/ou linhas usando as propriedades grid-column e grid-row.

.item {
    grid-column: 2 / 4; /* O item ocupa da segunda à terceira coluna */
    grid-row: 1 / 3; /* O item ocupa da primeira à segunda linha */
}

Frações

A unidade fr permite definir o tamanho das trilhas como uma fração do espaço disponível. Por exemplo, 1fr significa que a trilha ocupará uma parte igual do espaço restante.

.container {
    grid-template-columns: 1fr 2fr 3fr; /* Três colunas com proporções 1:2:3 */
}

Porcentagens e Rem

Podemos usar porcentagens e rem para definir tamanhos relativos ao tamanho da fonte ou ao tamanho do grid container.

.container {
    grid-template-columns: 20% 1rem 2fr; /* Três colunas com tamanhos relativos */
}

Repetição

A função repeat() nos permite criar padrões repetidos de colunas ou linhas.

.container {
    grid-template-columns: repeat(3, 1fr); /* Três colunas com proporções iguais

Especificando uma Largura Mínima para uma Linha

Às vezes, queremos garantir que uma linha tenha uma largura mínima, mesmo que o conteúdo dentro dela seja menor. Podemos usar a função minmax() para definir uma largura mínima e máxima para uma trilha.

.container {
    grid-template-columns: 1fr minmax(200px, 1fr); /* A primeira coluna ocupa 1/3 do espaço, a segunda tem no mínimo 200px */
}

Neste exemplo, a segunda coluna terá uma largura mínima de 200 pixels, mas se houver espaço extra, ela se expandirá para preenchê-lo.

Usando grid-template-areas

A propriedade grid-template-areas nos permite criar layouts mais descritivos, atribuindo nomes a áreas específicas do grid. Podemos organizar os elementos em um grid usando esses nomes.

.container {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: auto;
    grid-template-areas:
        "header header"
        "sidebar content"
        "footer footer";
}

.header {
    grid-area: header;
}

.sidebar {
    grid-area: sidebar;
}

.content {
    grid-area: content;
}

.footer {
    grid-area: footer;
}

Neste exemplo, estamos criando um layout com áreas nomeadas para o cabeçalho, barra lateral, conteúdo e rodapé.

Adicionando Células Vazias em Áreas de Template

Às vezes, queremos criar áreas de template que não contenham elementos. Podemos usar um ponto (.) para representar células vazias.

.container {
    grid-template-areas:
        "header header header"
        "sidebar . content"
        "footer footer footer";
}

Neste exemplo, a célula vazia na segunda linha e segunda coluna representa uma área sem elementos.

Preenchendo uma Página com um Grid

Para criar um grid que preencha toda a página, podemos definir o grid container como uma grade de uma única coluna e várias linhas.

.container {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, 1fr);
}

Neste exemplo, estamos criando um grid com quatro linhas que preenchem toda a altura da página.

Conclusão

O CSS Grid Layout é uma ferramenta poderosa para criar layouts flexíveis e responsivos. Compreender os conceitos básicos, como colunas, linhas, áreas e propriedades, nos permite criar designs complexos de maneira eficiente. Lembre-se de praticar e experimentar diferentes abordagens para aprimorar suas habilidades em CSS Grid.

Display no CSS: E para você validar seus códigos, você precisará de uma plataforma de host completa. Clique aqui e conheça a Hostinger, a hospedagem de sites com potência de verdade!!!