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?

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.

Mario e seu bigode

O personagem Mario só possui bigode porque quando ele foi criado, em 1981, a resolução de tela dos equipamentos disponíveis não permitia que fosse desenhada uma boca, então os desenvolvedores fizeram o grande bigode para contornar essa limitação tecnológica.

Asteroids

O título Asteroids, do Atari, possui recorde de pontuação há 30 anos. Em 1982 um americano chamado Scott Safran atingiu a marca de 41.336.440. Atualmente ele faz parte de um minúsculo grupo de jogadores que conseguiram manter seus recordes por mais de 30 anos.

Space Invaders

A partida mais longa do clássico Space Invaders durou incríveis 38 horas e 32 minutos e esta façanha foi conseguida por um jogador de apenas 12 anos! O jogo, claro, podia ser pausado para alimentação e descanso, mas ainda assim o recorde, estabelecido no dia 02/09/1980, ainda não foi quebrado. Saiba mais.

River Raid

O épico jogo River Raid, do Atari, foi desenhado e boa parte de sua programação foi feita por uma mulher: Carol Shaw, uma excelente programadora e funcionária da Activision em 1982. Saiba mais sobre a história deste incrível jogo, aqui.