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.