O que é e como funciona o CSS Grid
Bem-vindo(a) ao post no blog.
Nesse Post você vai aprender entender o funcionamento do CSS Grid; Criar e definir linhas e colunas com facilidade; Aprender as propriedades principais do container grid e dos itens; Controlar áreas, alinhamentos, espaçamentos e proporções; Criar um layout completo estilo dashboard/blog 100% com Grid.
🧠 O Que é o CSS Grid?
O CSS Grid Layout é um sistema bidimensional:
permite organizar os elementos em linhas e colunas simultaneamente, com controle total de tamanho, alinhamento e espaçamento.
Isso significa que você pode construir o esqueleto completo de uma página — cabeçalho, menu lateral, conteúdo e rodapé — tudo com algumas linhas de CSS.
🧩 Ativando o Grid
Para transformar um container em uma grade, basta declarar:
.container {
display: grid;
}
Os filhos diretos desse container se tornam automaticamente itens da grade.
⚙️ Definindo Linhas e Colunas
As propriedades fundamentais são:
grid-template-columns: valor valor valor;
grid-template-rows: valor valor valor;
Cada valor representa uma coluna (ou linha) da grade.
🔹 Exemplo Básico
📄 HTML
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
📄 CSS
.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: auto auto;
gap: 10px;
}
.container div {
background: #0077ff;
color: white;
text-align: center;
padding: 20px;
border-radius: 8px;
}
💡 Resultado:
Uma grade com 3 colunas e duas linhas automáticas (cria a segunda linha automaticamente se houver mais itens).
🔸 Unidades Inteligentes no Grid
● px: valor fixo.
● %: percentual relativo ao container.
● fr: unidade flexível do Grid — distribui o espaço disponível.
🔹 Exemplo:
grid-template-columns: 1fr 2fr 1fr;
💬 3 colunas com proporções 1:2:1.
O meio ocupa o dobro do espaço das laterais.
🧭 Alinhamentos e Espaçamento: Propriedade Função
gap → Espaço entre linhas e colunas
justify-items → Alinha os itens horizontalmente dentro das células
align-items → Alinha verticalmente dentro das células
justify-content → Move o conjunto da grade horizontalmente
align-content → Move o conjunto da grade verticalmente
Exemplo:
.container {
display: grid;
gap: 20px;
justify-items: center;
align-items: center;
}
🔧 Posicionando Itens Especificamente
Você pode fazer com que um item ocupe uma área maior da grade, usando:
.item1 {
grid-column: 1 / 3; /* da coluna 1 até antes da 3 */
grid-row: 1 / 2;
}
💡 Outro modo:
grid-column: span 2; /* ocupa 2 colunas */
📘 Assim você cria layouts assimétricos e personalizados rapidamente.
🔲 Definindo Áreas Nomeadas
Você pode dar nomes às regiões da sua grade e atribuí-los aos itens — muito usado em layouts de páginas completas.
.container {
display: grid;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
grid-template-columns: 200px 1fr;
grid-template-rows: 80px auto 70px;
gap: 10px;
}
header { grid-area: header; background: #0077ff; }
aside { grid-area: sidebar; background: #e0e0e0; }
main { grid-area: main; background: #fff; }
footer { grid-area: footer; background: #ccc; }
📄 HTML correspondente:
<div class="container">
<header>Header</header>
<aside>Sidebar</aside>
<main>Conteúdo principal</main>
<footer>Rodapé</footer>
</div>
💥 Resultado:
Um layout completo com cabeçalho, menu lateral, área principal e rodapé — tudo sem float, sem position, sem Flexbox!
📐 Repetição Automática com repeat()
Quando a grade tem várias colunas semelhantes:
grid-template-columns: repeat(3, 1fr);
💬 Cria automaticamente 3 colunas iguais — economiza código e é fácil de ajustar.
Você pode até combinar:
grid-template-columns: 200px repeat(2, 1fr);
🤖 Grid Responsivo com auto-fit e minmax()
Uma das funções mais úteis do CSS moderno.
Exemplo:
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
💡 Significa:
Crie o máximo de colunas possíveis (auto-fit), com largura mínima de 250px e máxima de 1fr.
Isso faz com que os elementos se reorganizem automaticamente conforme o tamanho da tela.
🎯 Resultado:
Layout totalmente responsivo sem media queries!
📘 Para um melhor Aprendizado 🎯 Pratique com exercícios, desafios e projetos
🧩 Projeto Prático — Layout de Blog com CSS Grid
📄 index.html
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Blog Layout CSS Grid</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<header>Meu Blog</header>
<aside>Navegação</aside>
<main>
<article>Post 1</article>
<article>Post 2</article>
<article>Post 3</article>
<article>Post 4</article>
</main>
<footer>© 2024 - Todos os direitos reservados</footer>
</div>
</body>
</html>
📄 style.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
background: linear-gradient(135deg, #a2d2ff, #cdb4db);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.container {
display: grid;
grid-template-areas:
"header header"
"aside main"
"footer footer";
grid-template-columns: 250px 1fr;
grid-template-rows: 80px auto 60px;
width: 90%;
max-width: 1200px;
background: white;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}
header {
grid-area: header;
background: #0077ff;
color: white;
text-align: center;
font-size: 24px;
font-weight: 600;
line-height: 80px;
}
aside {
grid-area: aside;
background: #f3f5f7;
padding: 20px;
border-right: 1px solid #ddd;
}
main {
grid-area: main;
padding: 20px;
display: grid;
gap: 20px;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
article {
background: #eef3ff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0,0,0,0.05);
text-align: center;
font-weight: 500;
transition: transform 0.3s;
}
article:hover {
transform: translateY(-6px);
}
footer {
grid-area: footer;
background: #0077ff;
color: white;
text-align: center;
line-height: 60px;
font-size: 14px;
}
💥 Resultado:
● Layout completo de blog ou portal;
● Colunas automáticas para os posts;
● Sidebar fixa e conteúdo fluido;
● Responsividade natural por causa do auto-fit.
💡 Dica Final — Grid + Flexbox Juntos
O Grid é excelente para o layout global da página, enquanto o Flexbox é ótimo para alinhar componentes internos.
É muito comum usar:
● Grid → estrutura geral (header, main, aside, footer)
● Flexbox → elementos dentro dessas seções (menus, botões, cartões, etc.)
Eles se complementam perfeitamente. 💪
Comentários
Postar um comentário