2.1 Propriedade display: grid
CSS Grid Layout é um sistema de layout poderoso que permite criar layouts complexos de páginas web usando linhas e colunas. O passo principal ao trabalhar com CSS Grid é criar um Grid Container. Abaixo, veremos como usar a propriedade display: grid para criar um Grid Container e gerenciar seus aspectos básicos.
Conceitos principais para criar um Grid Container
Propriedade display: grid
A propriedade display: grid define um elemento como um Grid Container. Este é o passo básico que permite usar todos os recursos do CSS Grid para layout de elementos.
Exemplo:
.grid-container {
display: grid;
}
Elementos principais do Grid Container
Depois de definir um Grid Container usando a propriedade display: grid, todos os elementos filhos deste container se tornam automaticamente grid-items. Isso permite gerenciar seu posicionamento e alinhamento dentro do container.
Exemplo:
.grid-container {
display: grid;
border: 2px solid #000;
}
.grid-item {
background-color: #3498db;
color: white;
padding: 20px;
border: 1px solid #fff;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemplo de Grid Container</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>
</body>
</html>
Explicação do código:
.grid-container: define um elemento como um Grid Container usando a propriedadedisplay: grid. Também adiciona uma borda para destacar visualmente o container.grid-item: define estilos básicos para elementos dentro do Grid Container, como cor de fundo, cor do texto, padding, borda e centralização do texto
2.2 Grid Containers Aninhados
Uma das vantagens do CSS Grid é a capacidade de criar Grid Containers Aninhados. Isso permite criar layouts complexos onde um grid-item pode se tornar um grid-container para seus elementos filhos.
Exemplo:
.grid-container {
display: grid;
gap: 10px;
border: 2px solid #000;
}
.grid-item {
background-color: #3498db;
color: white;
padding: 20px;
border: 1px solid #fff;
text-align: center;
}
.nested-grid-container {
display: grid;
gap: 5px;
background-color: #2980b9;
padding: 10px;
}
.nested-grid-item {
background-color: #1abc9c;
padding: 10px;
border: 1px solid #fff;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Containers Aninhados</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="grid-container">
<div class="grid-item">Elemento 1</div>
<div class="grid-item">
<div class="nested-grid-container">
<div class="nested-grid-item">Elemento Aninhado 1</div>
<div class="nested-grid-item">Elemento Aninhado 2</div>
</div>
</div>
<div class="grid-item">Elemento 3</div>
</div>
</body>
</html>
Explicação do código:
-
.nested-grid-container: define um Grid Container aninhado usando a propriedadedisplay: grid, além de adicionar espaçamento entre os elementos (gap: 5px) e padding interno (padding: 10px) -
.nested-grid-item: define estilos básicos para elementos dentro do Grid Container aninhado, como cor de fundo, padding e borda
2.3 Gerenciamento do Comportamento do Grid Container
A propriedade display: grid também permite o uso de propriedades adicionais para gerenciar o comportamento do Grid Container. Por exemplo, a propriedade grid-auto-flow gerencia o posicionamento automático dos elementos.
Exemplo:
.grid-container {
display: grid;
grid-auto-flow: row;
gap: 10px;
border: 2px solid #000;
}
.grid-item {
background-color: #3498db;
color: white;
padding: 20px;
border: 1px solid #fff;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Container com auto-flow</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>
</body>
</html>
2.4 Usando Flexbox dentro do Grid Container
Em alguns casos, usar Flexbox dentro de grid-items pode ser útil para criar layouts mais complexos. Isso permite combinar as vantagens de ambas as tecnologias.
.grid-container {
display: grid;
gap: 10px;
border: 2px solid #000;
}
.grid-item {
background-color: #3498db;
color: white;
padding: 20px;
border: 1px solid #fff;
text-align: center;
}
.flex-container {
display: flex;
gap: 10px;
}
.flex-item {
background-color: #1abc9c;
padding: 10px;
flex: 1;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox dentro do Grid Container</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="grid-container">
<div class="grid-item flex-container">
<div class="flex-item">Flex elemento 1</div>
<div class="flex-item">Flex elemento 2</div>
</div>
<div class="grid-item">Elemento 2</div>
<div class="grid-item">Elemento 3</div>
</div>
</body>
</html>
Explicação do código:
.flex-container: define um grid-item como um flex-container usando a propriedadedisplay: flex.flex-item: define estilos básicos para elementos dentro do flex-container, como cor de fundo, padding e flexibilidade (flex: 1)
GO TO FULL VERSION