Criando um site responsivo com CSS Grid 🎨🖥️
O CSS Grid é uma técnica de layout bidimensional que permite aos desenvolvedores criarem layouts complexos com facilidade. Neste tutorial, vamos criar um site responsivo utilizando o CSS Grid.
Preparando o Ambiente
Para começar, crie um novo arquivo HTML e um arquivo CSS. No arquivo HTML, adicione uma referência ao arquivo CSS no cabeçalho:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<!-- O conteúdo do nosso site vai aqui -->
</body>
</html>
Criando o Layout
Vamos criar um layout simples com um cabeçalho, um conteúdo principal e um rodapé. No nosso arquivo HTML, vamos adicionar três divs para cada uma dessas seções:
<div id="header">Cabeçalho</div>
<div id="main">Conteúdo Principal</div>
<div id="footer">Rodapé</div>
Agora, no nosso arquivo CSS, vamos criar um grid para organizar essas seções:
body {
display: grid;
grid-template-rows: auto 1fr auto;
height: 100vh;
margin: 0;
font-family: Arial, sans-serif;
}
#header {
grid-row: 1;
background-color: #f8f9fa;
padding: 20px;
text-align: center;
}
#main {
grid-row: 2;
background-color: #fff;
padding: 20px;
}
#footer {
grid-row: 3;
background-color: #f8f9fa;
padding: 20px;
text-align: center;
}
Tornando o Layout Responsivo
O verdadeiro poder do CSS Grid vem de sua capacidade de criar layouts responsivos. Vamos adicionar uma media query ao nosso CSS para alterar o layout quando a largura da janela do navegador for inferior a 600px:
@media (max-width: 600px) {
body {
grid-template-rows: auto 1fr auto;
}
#header,
#main,
#footer {
padding: 10px;
}
}
Conclusão
E é isso! Você acabou de criar um site responsivo utilizando o CSS Grid. Esperamos que este tutorial tenha te ajudado a entender melhor como o CSS Grid funciona e como você pode usá-lo para criar layouts responsivos.
Para continuar aprendendo mais sobre desenvolvimento web e design responsivo, confira o artigo sobre O Poder do CSS Flexbox: Tornando a Layoutização Mais Simples e Eficaz.