Agora que você já conhece os fundamentos do Grid, é hora de usar essa ferramenta para montar estruturas reais de página.

Aqui o foco é **pensar layout**, não decorar propriedades.

Layout clássico de página

Um layout muito comum possui:

  • Cabeçalho
  • Menu lateral
  • Conteúdo principal
  • Rodapé

Com Grid, isso fica simples e claro.

Estrutura HTML do layout

 <div class="layout"> <header>Header</header> <aside>Menu</aside> <main>Conteúdo</main> <footer>Footer</footer> </div>

O HTML é simples e semântico. Toda a mágica acontece no CSS.

Criando a grade principal

 .layout { display: grid; grid-template-columns: 220px 1fr; grid-template-rows: auto 1fr auto; gap: 16px; min-height: 100vh; }

Essa grade cria:

  • Coluna lateral fixa
  • Área principal flexível
  • Altura total da tela

Posicionando os elementos

Agora indicamos onde cada elemento fica na grade. 

 header { grid-column: 1 / -1; }

footer {
grid-column: 1 / -1;
}

Isso faz o header e o footer ocuparem toda a largura.

Layout final funcionando

Com poucas linhas de CSS, temos um layout completo e organizado.

O Grid resolve o layout estrutural. O Flexbox pode ser usado dentro das áreas.

Usando áreas nomeadas (grid-template-areas)

Outra forma muito clara de trabalhar com Grid é usando áreas nomeadas. 

 .layout { display: grid; grid-template-areas: "header header" "menu main" "footer footer"; grid-template-columns: 220px 1fr; grid-template-rows: auto 1fr auto; gap: 16px; } 
 header { grid-area: header; } aside { grid-area: menu; } main { grid-area: main; } footer { grid-area: footer; }

Esse formato é extremamente legível.

Responsividade básica com Grid

Com uma media query simples, podemos adaptar o layout. 

 @media (max-width: 768px) { .layout { grid-template-areas: "header" "main" "menu" "footer"; grid-template-columns: 1fr; } }
Grid facilita muito a adaptação de layouts para mobile.

Grid + Flexbox juntos

Uma prática comum e recomendada:

  • Grid → estrutura da página
  • Flexbox → organização interna dos componentes

Eles se complementam perfeitamente.

💾🧠 Resumo da aula para nunca mais esquecer

  • CSS Grid é ideal para layouts completos
  • grid-template-columns e rows definem a estrutura
  • grid-template-areas torna o layout mais legível
  • Grid facilita responsividade
  • Grid e Flexbox funcionam melhor juntos

Na próxima aula, vamos falar sobre design responsivo e entender como pensar layouts para diferentes telas 📱💻

HARDWARE

Entendendo o seu computador

O que há dentro do meu computador?

Existem alguns componentes fundamentais presentes dentro do seu computador e é muito importante que você conheça um pouco sobre eles, seja para argumentar com algum vendedor durante a compra de um novo PC ou para identificar alguma atitude desleal de algum técnico que esteja te passando um orçamento para reparo. Na seção Raio-X aqui do Contém Bits você pode conhecer e entender mais detalhadamente sobre cada componente, ou também pode clicar abaixo no componente que deseja, para conhecê-lo melhor.

  • Gabinetes

  • Placas-Mãe

  • Processadores

  • Memória

  • Fontes

  • Drives Ópticos

  • Discos Rígidos

  • SSD

  • Placas de Som

  • Placas de Vídeo

Você Sabia?

Ultima Online

Criar um jogo é muito mais complexo do que parece. São milhares, às vezes, milhões de linhas de código. Isso não é exagero! Apenas o jogo Ultima Online possui 6.006.313 linhas de programação, totalizando 25.103.295 palavras

Máquina de Pascal

A Máquina de Pascal, criada em 1642 pelo filósofo, físico e matemático francês Blaise Pascal, é reconhecida como o primeiro computador do mundo e ele foi criado com o objetivo de calcular impostos. Saiba mais.

Space Invaders

O título Space Invaders, lançado em 1980, fez tanto sucesso em todo o mundo que as pessoas compravam o console Atari apenas para poderem jogá-lo em casa. Saiba mais sobre este incrível título clicando aqui.

Civilization

A empresa Take-Two pagou à Infogrames mais de 22 milhões de dólares pelos direitos de Civilization, em novembro de 1994. Ainda sobre este título, Sid Meier, um dos seus fundadores, é o profissional da área dos games mais premiado em todo o mundo.

Nintendo Entertainment System

O console Nintendo Entertainment System (NES), da Nintendo, detém o recorde de videogame mais clonado em todo o mundo. Já foram catalogados mais de 300 aparelhos diferentes capazes de reproduzir seus jogos! Saiba mais sobre ele aqui.