10.1 Combinando com Media Queries
O CSS Grid Layout fornece ferramentas incríveis para criar layouts complexos e responsivos. Combinando CSS Grid com media queries, dá pra criar layouts que se adaptam a diferentes tamanhos de tela e dispositivos. Vamos ver como utilizar media queries junto com CSS Grid pra criar páginas web flexíveis e responsivas.
Conceitos Básicos de Media Queries
As media queries permitem aplicar diferentes estilos CSS dependendo das características do dispositivo, tipo a largura da tela, altura da tela, orientação da tela e outros. Combinando com o CSS Grid, as media queries permitem alterar a estrutura e posição dos elementos dependendo dos tamanhos da tela.
Sintaxe das Media Queries:
@media (condição) {
/* Estilos que são aplicados quando a condição é atendida */
}
Onde «condição» é a condição em que os estilos serão aplicados.
Normalmente, as condições mais usadas estão relacionadas à largura da tela, como max-width e min-width.
10.2 Mudando o Número de Colunas
Exemplo de Implementação Completa (mudando o número de colunas dependendo da largura da tela):
/* Estilo base para todas as telas */
.grid-container {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}
.grid-item {
background-color: #3498db;
color: white;
padding: 20px;
text-align: center;
border: 1px solid #fff;
}
/* Para telas maiores que 600px */
@media (min-width: 600px) {
.grid-container {
grid-template-columns: repeat(2, 1fr); /* Duas colunas */
}
}
/* Para telas maiores que 900px */
@media (min-width: 900px) {
.grid-container {
grid-template-columns: repeat(3, 1fr); /* Três colunas */
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Layout Responsivo com CSS Grid</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="grid-container">
<div class="grid-item">Elemento 1</div>
<div class="grid-item">Elemento 2</div>
<div class="grid-item">Elemento 3</div>
<div class="grid-item">Elemento 4</div>
<div class="grid-item">Elemento 5</div>
<div class="grid-item">Elemento 6</div>
</div>
</body>
</html>
Explicação do Código:
- Estilo Base: cria um container Grid com uma coluna para todas as telas
- Media Query para telas maiores que 600px: muda o layout para duas colunas
- Media Query para telas maiores que 900px: muda o layout para três colunas
10.3 Dependência da Largura da Tela
Exemplo de Implementação Completa (mudando a posição dos elementos dependendo da largura da tela):
/* Estilo base para todas as telas */
.grid-container {
display: grid;
grid-template-areas:
"header"
"main"
"sidebar"
"footer";
gap: 10px;
}
.header {
grid-area: header;
background-color: #2ecc71;
padding: 20px;
text-align: center;
}
.sidebar {
grid-area: sidebar;
background-color: #3498db;
padding: 20px;
text-align: center;
}
.main {
grid-area: main;
background-color: #9b59b6;
padding: 20px;
text-align: center;
}
.footer {
grid-area: footer;
background-color: #e74c3c;
padding: 20px;
text-align: center;
}
/* Para telas maiores que 600px */
@media (min-width: 600px) {
.grid-container {
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
grid-template-columns: 1fr 3fr;
}
}
/* Para telas maiores que 900px */
@media (min-width: 900px) {
.grid-container {
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
grid-template-columns: 1fr 2fr;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Posicionamento Responsivo com CSS Grid</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="grid-container">
<div class="header">Header</div>
<div class="sidebar">Sidebar</div>
<div class="main">Main Content</div>
<div class="footer">Footer</div>
</div>
</body>
</html>
Explicação do Código:
- Estilo Base: cria um container Grid com quatro linhas e uma coluna para todas as telas
- Media Query para telas maiores que 600px: muda o layout para duas colunas e altera o posicionamento das áreas: o cabeçalho ocupa duas colunas, o conteúdo principal e a barra lateral ocupam uma coluna cada, o rodapé ocupa duas colunas
- Media Query para telas maiores que 900px: muda o layout para três colunas e altera o posicionamento das áreas: o cabeçalho ocupa três colunas, o conteúdo principal e a barra lateral ocupam uma e duas colunas respectivamente, o rodapé ocupa três colunas
10.4 Mudando o Tamanho dos Elementos
Exemplo de Implementação Completa (mudando o tamanho dos elementos dependendo da largura da tela):
/* Estilo base para todas as telas */
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: 100px;
gap: 10px;
}
.grid-item {
background-color: #3498db;
color: white;
padding: 20px;
text-align: center;
border: 1px solid #fff;
}
/* Para telas maiores que 600px */
@media (min-width: 600px) {
.grid-container {
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 150px;
}
}
/* Para telas maiores que 900px */
@media (min-width: 900px) {
.grid-container {
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 200px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tamanhos Responsivos com CSS Grid</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="grid-container">
<div class="grid-item item1">Elemento 1</div>
<div class="grid-item item2">Elemento 2</div>
<div class="grid-item item3">Elemento 3</div>
<div class="grid-item item4">Elemento 4</div>
<div class="grid-item item5">Elemento 5</div>
<div class="grid-item item6">Elemento 6</div>
</div>
</body>
</html>
Explicação do Código:
- Estilo Base: cria um container Grid com duas colunas e linhas automáticas com altura de
100pxpara todas as telas - Media Query para telas maiores que 600px: muda o layout para três colunas e aumenta a altura das linhas para
150px - Media Query para telas maiores que 900px: muda o layout para quatro colunas e aumenta a altura das linhas para
200px
GO TO FULL VERSION