Pular para conteúdo

Aula 13 - Grid Layout 🏁

Objetivo

Objetivo: Compreender o potencial do CSS Grid para criar layouts bidimensionais (linhas e colunas simultâneas) e aprender a dividir a página em grades profissionais e flexíveis.

1. O que é CSS Grid? 🤔

Diferente do Flexbox (que foca em uma dimensão), o Grid Layout é feito para duas dimensões: você controla o alinhamento tanto na horizontal (colunas) quanto na vertical (linhas).

  • Flexbox: Ideal para componentes (menus, botões alinhados).
  • Grid: Ideal para o layout geral da página (cabeçalho, barra lateral, conteúdo e rodapé).

2. Definindo a Grade 📐

Para começar, transformamos um elemento em um Grid Container:

.container {
    display: grid;
    grid-template-columns: 200px auto; /* Duas colunas */
    grid-template-rows: 100px auto 50px; /* Três linhas */
}

3. Unidades Modernas: fr e repeat 📏

O CSS Grid introduziu a unidade de Fração (fr), que distribui o espaço disponível de forma proporcional.

.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 colunas iguais */
    gap: 20px; /* Espaçamento entre as células */
}
  • repeat(3, 1fr): Cria 3 colunas que dividem o espaço igualmente.
  • gap: Define o "respiro" entre as linhas e colunas.

4. Posicionando Itens (Grid Column/Row) 🎯

Podemos dizer exatamente onde um item começa e onde ele termina na grade usando as linhas da grade.

.item-destaque {
    grid-column: 1 / 3; /* Começa na linha 1 e termina na 3 (ocupa 2 colunas) */
}

5. Visualizando a Grade 📊

graph TD
    subgraph Grid
    C1[Coluna 1]
    C2[Coluna 2]
    C3[Coluna 3]
    end
    Note over C1,C3: grid-template-columns: 1fr 1fr 1fr

6. Prática: Layout de Galeria 🚀

Vamos criar uma grade de fotos no terminal:

$ touch index.html estilo.css
$ # No CSS, para criar um grid 3x3:
$ .galeria {
$   display: grid;
$   grid-template-columns: repeat(3, 1fr);
$   gap: 10px;
$ }

7. Mini-Projeto: Layout Completo de Site 🖱️

  1. Crie um <div> pai chamado .layout.
  2. Dentro dele, coloque: <header>, <aside>, <main> e <footer>.
  3. No CSS, transforme o .layout em um Grid.
  4. Configure o grid para ter:
    • Um cabeçalho que ocupa toda a largura (grid-column: 1 / 3).
    • Uma barra lateral (aside) e o conteúdo principal (main) lado a lado.
    • Um rodapé que também ocupa toda a largura.
  5. Dica: Use cores de fundo diferentes para ver a "mágica" acontecer.

8. Exercícios Progressivos 📝

Básicos

  1. Qual a diferença fundamental entre Flexbox e Grid?
  2. Para que serve a propriedade gap?

Intermediários

  1. O que significa a unidade 1fr no CSS Grid?
  2. Como fariam para criar uma grade com 4 colunas de exatamente 250px cada uma, usando a função repeat?

Desafio 🧠

  1. Pesquise sobre a propriedade grid-area. Como ela facilita a montagem de layouts complexos comparada ao uso de números de linhas?

Próxima Aula: Vamos aprender a adaptar o site para celulares com a Responsividade! 📱