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?

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.

ENIAC

O ENIAC, primeiro computador valvulado do mundo, possuía 17.000 válvulas, 500.000 pontos de solda, 30 toneladas de peso e ocupava uma área de 180 metros quadrados. Clique aqui e conheça mais sobre a história dos computadores.

PDP-1

O primeiro computador a conseguir rodar o jogo Spacewar era o PDP-1, que custava 120 mil dólares e pertencia ao Massachusetts Institute of Technology. O jogo demorou 200 horas para ser desenvolvido, em 1962, e seu criador foi um cientista da computação chamado Steve Russel.

Galaxy Game

As primeiras máquinas de fliperama do mundo a utilizarem moedas, chamadas de Galaxy Game, custavam mais de 20 mil dólares para serem produzidas. Saiba mais sobre elas aqui.

Tetris

Desde o seu lançamento, em 1985, o fantástico jogo Tetris vende pelo menos 70 milhões de unidades por ano em todo o mundo! Os dados são oficiais e fornecidos pela THQ, uma das distribuidoras do título.