Crie um Projeto Real Usando CSS Grid
Agora é hora de colocar em prática o que aprendemos no módulo anterior. Vamos criar um projeto real utilizando CSS Grid.
Esse projeto nos ajudará a consolidar nossos conhecimentos e aplicá-los de forma concreta. Vamos começar pelos passos essenciais.
Estrutura Básica do Projeto
Começaremos com uma estrutura HTML básica que representa as seções principais do projeto, como header, main content, sidebar e footer.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="styles.css"> <title>Meu Projeto com CSS Grid</title> </head> <body> <header>Header</header> <aside class="sidebar">Sidebar</aside> <main>Main Content</main> <footer>Footer</footer> </body> </html>
Estilo com CSS Grid
Agora, vamos criar um arquivo styles.css para aplicar o layout utilizando CSS Grid. Utilizaremos os conceitos aprendidos, como grid-template-areas, grid-area, e até mesmo personalização avançada.
body {
display: grid;
grid-template-columns: 1fr 3fr; /* Duas colunas, sendo a segunda três vezes maior */
grid-template-rows: auto 1fr auto; /* Três linhas, com a segunda ocupando a maior parte */
grid-template-areas:
'header header'
'sidebar main'
'footer footer';
}
header {
grid-area: header;
background-color: #3498db;
color: white;
padding: 10px;
}
.sidebar {
grid-area: sidebar;
background-color: #2ecc71;
color: white;
padding: 10px;
}
main {
grid-area: main;
background-color: #ecf0f1;
padding: 10px;
}
footer {
grid-area: footer;
background-color: #e74c3c;
color: white;
padding: 10px;
}
Adaptação Responsiva
Para garantir uma experiência adaptável, adicionaremos Media Queries para ajustar o layout em diferentes tamanhos de tela.
@media screen and (max-width: 600px) {
body {
grid-template-columns: 1fr; /* Uma coluna para telas menores que 600px */
}
}
Este projeto prático é uma ótima maneira de aprender os conceitos fundamentais do CSS Grid e explorar sua criatividade na construção de layouts web eficientes e atraentes.
