CSS Grid

Tempo de leitura: 5 minutos

CSS Grid: O CSS Grid Layout é uma especificação poderosa que revolucionou a forma como criamos layouts na web. Com o Grid, podemos organizar elementos em linhas e colunas de forma bidimensional, criando layouts complexos e responsivos com muito mais facilidade do que com técnicas anteriores como float e position.

Neste artigo, vamos explorar em detalhes o CSS Grid, suas principais propriedades e como utilizá-lo para criar layouts incríveis.

O que é o CSS Grid?

O CSS Grid é um sistema de layout bidimensional que permite aos desenvolvedores criar layouts complexos e responsivos de forma mais intuitiva. Ao invés de depender de posicionamento absoluto ou floats, o Grid nos permite organizar elementos em linhas e colunas, definindo suas posições de forma precisa.

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.

Vantagens do CSS Grid

• Flexibilidade: Permite criar layouts complexos e personalizados com facilidade.
• Responsividade: Adapta-se facilmente a diferentes tamanhos de tela.
• Organização: Organiza os elementos de forma clara e intuitiva.
• Performance: Geralmente oferece um bom desempenho.

Desafios e Considerações

• Compatibilidade: Embora o CSS Grid seja amplamente suportado, é sempre bom verificar a compatibilidade com navegadores mais antigos.
• Complexidade: Para layouts muito complexos, o Grid pode exigir um pouco mais de tempo para configuração.
• Aprendizado: Existem muitas propriedades e conceitos a serem aprendidos, mas a curva de aprendizado é relativamente suave.

Conclusão

CSS Grid: O CSS Grid é uma ferramenta poderosa e versátil para criar layouts modernos e responsivos. Ao dominar as propriedades e conceitos básicos do Grid, você será capaz de criar designs mais sofisticados e eficientes. Experimente diferentes combinações de propriedades e explore as possibilidades que o CSS Grid oferece.

Toda jornada tem um início, e o início para se tornar um desenvolvedor web é dominar as seguintes tecnologias, que você encontra aqui mesmo:

E se você gosta do nosso conteúdo, não deixe de contribuir adquirindo os serviços e produtos dos nossos apoiadores e empresas que somos associados: