DISPLAY GRID

O CSS Grid Layout é a ferramenta mais poderosa para criar layouts complexos em duas dimensões (linhas e colunas). Ele permite organizar o conteúdo de forma precisa, controlando o tamanho e o espaçamento de cada elemento.

Conceitos Fundamentais

Para entender o Grid, você precisa conhecer seus componentes principais:

Grid Container: É o elemento pai onde você aplica a propriedade display: grid. Ele é a "tela" onde todo o layout será desenhado.
Grid Item: São os elementos filhos diretos do Grid Container. Eles são os "blocos" que você vai posicionar.
Grid Line (Linha): São as linhas que dividem o grid, tanto na vertical quanto na horizontal.
Grid Track (Trilha): É o espaço entre duas linhas do grid, formando uma linha ou coluna.
Grid Cell (Célula): É a menor unidade do grid, formada pela interseção de uma linha e uma coluna.
Grid Area (Área): É um espaço que pode ocupar múltiplas linhas e colunas, definido por quatro linhas do grid.

Veja na imagem abaixo, partes do grid.

Como Estruturar o Layout (O Template)

O esqueleto do seu grid é definido pelas propriedades de template no Grid Container.

grid-template-columns: Define o número e o tamanho das colunas.
grid-template-rows: Define o número e o tamanho das linhas.
grid-template-areas: Permite nomear áreas do seu layout, facilitando a organização.

Exemplo:

CSS

display: grid;

grid-template-columns: [col-1] 32vw [col-2] 32vw [col-3] 32vw;

grid-template-rows: 80vh;

Neste exemplo, você cria 3 colunas de 32vw e 1 linha de 80vh.

Mesclando Células

Você pode fazer um Grid Item ocupar mais de uma célula usando as seguintes propriedades.

grid-column: Define as colunas que o item irá ocupar.
- grid-column: 1 / 3; (ocupa da coluna 1 até a coluna 3).
grid-row: Define as linhas que o item irá ocupar.
- grid-row: 1 / 2; (ocupa da linha 1 até a linha 2).

Você também pode usar os nomes das linhas ou as propriedades *-start e *-end:

CSS

grid-column: col-1 / col-3; /* ou */

grid-column-start: 1;

grid-column-end: 3;

Organização por Áreas Nomeadas (grid-template-areas)

Essa é uma das maneiras mais poderosas de criar layouts sem se preocupar com números de linha.

Defina as áreas no contêiner:

CSS

.pai {

display: grid;

grid-template-areas:

'header header header'

'main main aside'

'footer footer footer';

}

Atribua cada item à sua área correspondente:

CSS

header {

grid-area: header;

}

main {

grid-area: main;

}

aside {

grid-area: aside;

}

footer {

grid-area: footer;

}

Espaçamentos e Fluxo de Itens

Espaçamento (gap): Use gap, row-gap ou column-gap para criar espaçamento entre os itens sem precisar de margens.

Fluxo (grid-auto-flow): Define como os itens são dispostos automaticamente.

row (padrão): Os itens preenchem o grid linha por linha.
column: Os itens preenchem o grid coluna por coluna.
dense: Otimiza o preenchimento, usando os espaços vazios deixados por outros itens.

Direção do Fluxo e Repetição de Células

direction: Controla a direção do fluxo do texto e dos elementos.

ltr (padrão): Da esquerda para a direita.
rtl: Da direita para a esquerda (útil para idiomas como árabe e hebraico).

repeat(): Uma função prática para criar trilhas repetidas sem precisar escrever todos os valores.

grid-template-columns: repeat(12, 200px); cria 12 colunas de 200px.

Alinhamento de Conteúdo

Para centralizar o conteúdo dentro de um Grid Item, a melhor prática é usar Flexbox no próprio item:

CSS

.item-do-grid {

display: flex;

justify-content: center; /* alinhamento horizontal */

align-items: center; /* alinhamento vertical */

}

Isso separa a responsabilidade: o Grid controla o layout externo (a posição do item), enquanto o Flexbox controla o alinhamento interno (do conteúdo dentro do item).

Galeria Responsiva com CSS Grid

FASE 1: Montagem da Estrutura HTML

Nesta fase, criamos o esqueleto do site. Usamos o <main> como container principal do Grid e 8 tags <section> (as caixas da galeria).

Importante: O <meta name="viewport"> é crucial para que o navegador entenda a responsividade e aplique as regras de celular corretamente.

HTML

<!DOCTYPE html>

<head>

<title>Grid Mestre Leal</title>

</head>

<body>

<main>

</main>

</body>

</html>

FASE 2: Configuração Básica do CSS (grid.css)

Esta parte define o ambiente do seu site, aplicando um reset básico e criando variáveis de cor para facilitar a manutenção.

Bloco *: Remove margens e paddings padrão. O box-sizing garante que as caixas não quebrem o layout.
Bloco :root: Define variáveis de cor. Mude a cor aqui e o site todo é atualizado.

CSS

/* === 1. RESET BÁSICO E CONFIGURAÇÃO GLOBAL === */

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

/* === 2. VARIÁVEIS DE CORES === */

:root {

--cordefundo1: rgb(149, 149, 137);

--cordefundo2: rgba(245, 245, 220, 0.955);

}

FASE 3: Layout Desktop e o Grid Padrão

Este é o layout de base (o que aparece em telas grandes). É onde definimos as 4 colunas iniciais.

display: grid: Ativa o sistema Grid no container main.
width: 100%: Usa 100% da largura do pai, corrigindo o erro de barra de rolagem do 100vw.
repeat(4, 1fr): Cria 4 colunas, cada uma com 20% da largura.
justify/align-content: Centraliza o bloco do Grid dentro da tela.

CSS

/* === 3. GRID PRINCIPAL (Versão Desktop) === */

main {

background-color: var(--cordefundo1);

width: 100%;

height: 70vh;

display: grid;

gap: 4%;

justify-content: center;

align-content: center;

grid-template-columns: repeat(4, 20%);

grid-template-rows: repeat(2, 40%);

}

FASE 4: Estilização e Conteúdo das Caixas (Imagens)

Aqui entra o seletor [class^="s"] para aplicar estilos comuns a todas as 8 seções de uma vez (economizando código) e definimos o link de cada imagem individualmente.

Bloco section[class^="s"]: Estilos que se repetem, como background-size: cover (cobre a área sem distorcer) e o efeito de mistura (background-blend-mode).
Bloco .s1, .s2, etc.: Define o arquivo de imagem específico para cada caixa.

CSS

/* === 4. CONFIGURAÇÃO GENÉRICA DAS CAIXAS === */

/* O seletor 'class^="s"' pega todas as sections que começam com a letra 's' */

section[class^="s"] {

background-color: var(--cordefundo2);

/* Configurações da Imagem de Fundo */

background-size: cover;

background-position: center;

background-repeat: no-repeat;

}

/* === 5. IMAGENS INDIVIDUAIS (Substitua pelos seus caminhos) === */

.s1 { background-image: url('sua-imagem-1.jpg'); }

.s2 { background-image: url('sua-imagem-2.jpg'); }

.s3 { background-image: url('sua-imagem-3.jpg'); }

.s4 { background-image: url('sua-imagem-4.jpg'); }

.s5 { background-image: url('sua-imagem-5.jpg'); }

.s6 { background-image: url('sua-imagem-6.jpg'); }

.s7 { background-image: url('sua-imagem-7.jpg'); }

.s8 { background-image: url('sua-imagem-8.jpg'); }

FASE 5: Responsividade com Media Queries

Esta é a parte crucial para adaptar o Grid a telas menores. Mudamos a quantidade de colunas e usamos a unidade fr (fração) e height: auto para permitir a rolagem.

Tablet (679px a 1023px): Ideal para visualização em modo paisagem (landscape), usando 2 colunas.
Celular (max-width: 678px): Empilha os itens para máxima legibilidade na vertical, usando 1 coluna.

CSS

/* === 6. RESPONSIVIDADE === */

/* TABLET (Entre 679px e 1023px) */

@media (min-width: 679px) and (max-width: 1023px) {

main {

/* 2 colunas, dividindo o espaço restante (fr) */

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

/* 4 linhas (2 x 4 = 8 itens) */

grid-template-rows: repeat(4, 250px);

height: auto;

padding: 40px 0;

}

/* CELULAR (Menor que 679px) */

@media (max-width: 678px) {

main {

/* 1 coluna, ocupando todo o espaço disponível */

grid-template-columns: 1fr;

/* 8 linhas com altura fixa para as imagens */

grid-template-rows: repeat(8, 250px);

height: auto;

padding: 20px;

gap: 20px;

}