Módulo 2 / HTML & CSS

CSS Grid

Layouts avançados com o sistema de grade bidimensional.

school Aula 08 schedule 2 horas

Comparação

Flexbox vs Grid

view_stream Flexbox (1D)

1

2

3

▸ Uma direção por vez (linha OU coluna)
▸ Ideal para componentes e alinhamentos
▸ Conteúdo define o layout

grid_view Grid (2D)

1

2

3

4

5

6

▸ Linhas E colunas ao mesmo tempo
▸ Ideal para layouts de página inteira
▸ Layout define o conteúdo

lightbulb Não é um contra o outro! Use Grid para a estrutura da página e Flexbox para os componentes dentro dela.

Fundamento

Definindo a grade

code Ativando o Grid

.container {
  display: grid;

  /* 3 colunas de 200px */
  grid-template-columns: 200px 200px 200px;

  /* 2 linhas de 100px */
  grid-template-rows: 100px 100px;

  /* Espaço entre itens */
  gap: 16px;
}

Resultado:

1

2

3

4

5

6

lightbulb Os itens se distribuem automaticamente nas células da grade.

Flexibilidade

fr e repeat()

straighten Unidade fr (fração)

/* Divide o espaço proporcionalmente */
.grid {
  grid-template-columns: 1fr 2fr 1fr;
}

1fr

2fr

1fr

A coluna central recebe o dobro do espaço.

repeat repeat()

/* Atalho para repetir colunas */
.grid {
  /* 4 colunas iguais */
  grid-template-columns: repeat(4, 1fr);
}

/* Misturando fixo e flexível */
grid-template-columns: 250px repeat(3, 1fr);

1

2

3

4

Controle

Posicionando itens

.header {
  grid-column: 1 / 4;  /* da linha 1 até a 4 */
}

.sidebar {
  grid-row: 2 / 4;     /* da linha 2 até a 4 */
}

/* Atalho com span */
.banner {
  grid-column: span 3;  /* ocupa 3 colunas */
}

Resultado:

Header (col 1/4)

Sidebar (row 2/4)

Conteúdo

Footer

Visual

grid-template-areas

.layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: 60px 1fr 50px;
  grid-template-areas:
    "header  header"
    "sidebar main"
    "footer  footer";
  gap: 8px;
}

.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.footer  { grid-area: footer; }

Resultado:

Header

Sidebar

Main

Footer

lightbulb O layout fica visualmente claro como um "mapa" no código!

Responsivo

minmax() e auto-fit

minmax()

/* Tamanho mínimo e máximo */
.grid {
  grid-template-columns: 
    repeat(3, minmax(150px, 1fr));
}

Cada coluna tem no mínimo 150px e cresce até preencher 1 fração.

star Grid responsivo sem media queries

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

1

2

3

4

Os itens se reorganizam automaticamente conforme o espaço!

lightbulb auto-fit cria quantas colunas couberem. auto-fill preserva espaços vazios.

Alinhamento

Alinhando no Grid

No contêiner (todas as células)

/* Alinha horizontalmente */
justify-items: start | center | end | stretch;

/* Alinha verticalmente */
align-items: start | center | end | stretch;

/* Atalho para ambos */
place-items: center center;

Em um item específico

/* Alinha horizontalmente */
justify-self: start | center | end | stretch;

/* Alinha verticalmente */
align-self: start | center | end | stretch;

/* Atalho para ambos */
place-self: center end;

Distribuir a grade no contêiner

/* Quando a grade é menor que o contêiner */
justify-content: center;       /* grade no centro horizontal */
align-content: center;         /* grade no centro vertical */
place-content: center center; /* atalho */

Guia

Quando usar cada um?

grid_view Use Grid para:

check Layout geral da página (header, sidebar, main, footer)
check Galerias de imagens
check Dashboards com múltiplas seções
check Quando precisa alinhar em linhas e colunas

view_stream Use Flexbox para:

check Navbars e menus
check Centralização de conteúdo
check Componentes em uma única direção
check Distribuição dinâmica de itens

lightbulb Na prática, você vai usar ambos juntos: Grid para a macro-estrutura e Flexbox para os micro-componentes.

Exemplo real

Layout completo

.page {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header  header"
    "sidebar main"
    "footer  footer";
  min-height: 100vh;
  gap: 0;
}

/* Dentro do main, Flexbox para cards */
.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

Resultado:

Logo

Home Sobre Contato

Menu 1 Menu 2 Menu 3

Card 1

Card 2

Card 3

Card 4

Footer

Mão na massa

Exercício prático

edit_note Layout de página com Grid + Flexbox

Crie um layout com grid-template-areas: header, sidebar, main e footer
Defina a sidebar com largura fixa (250px) e o main com 1fr
Dentro do main, crie uma galeria de cards com display: grid e repeat(auto-fit, minmax(200px, 1fr))
Use place-items: center para centralizar o conteúdo de um card
Aplique min-height: 100vh para a página ocupar toda a tela

star Bônus: pratique no Grid Garden!

Próxima aula

Aula 09

Responsividade: media queries e mobile-first.

task_alt O que aprendemos hoje

check_circle Flexbox vs Grid: quando usar cada um
check_circle grid-template-columns, rows e areas
check_circle Unidade fr e repeat()
check_circle minmax() e auto-fit para grids responsivos
check_circle Layout completo com Grid + Flexbox

Próxima aula

auto_stories Referência: CSS-Tricks: A Complete Guide to Grid