1.1 Princípios básicos do Grid Layout
CSS Grid Layout é uma ferramenta poderosa para criar layouts complexos e adaptativos. Ele oferece aos desenvolvedores um sistema de grade bidimensional para posicionar elementos, o que facilita a criação de layouts simples e complexos. Vamos dar uma olhada nas principais ideias e na sintaxe do CSS Grid, sem entrar em propriedades específicas.
Principais conceitos do CSS Grid
- Grid Container e Grid Itens:
- Grid Container é o elemento que inclui
display: grid. Esse elemento vira o contêiner da grade, e todos os seus elementos filhos diretos se tornam Grid Itens - Grid Itens são os elementos filhos diretos do Grid Container, que são posicionados na grade
- Grid Container é o elemento que inclui
- Eixos da grade:
- Eixo principal (inline axis) e eixo de bloco (block axis): Grid tem suporte a dois eixos para posicionamento de elementos — o eixo principal e o de bloco. Por padrão, o eixo principal é horizontal, e o de bloco vertical
- Células da grade (Grid Cells):
- Células da grade são os blocos básicos formados na interseção de linhas e colunas. Cada Grid Item ocupa uma ou mais células
- Linhas da grade (Grid Lines):
- Linhas da grade são linhas horizontais e verticais que dividem as linhas e colunas. Elas são usadas para posicionar elementos em relação à grade
- Áreas da grade (Grid Areas):
- Áreas da grade são áreas nomeadas na grade, criadas pela junção de várias células. Elas permitem agrupar células e posicionar elementos em áreas específicas
1.2 Elementos Sintáticos
Elementos sintáticos básicos do CSS Grid
1. Criando um Grid Container:
.container {
display: grid; /* ou display: inline-grid */
}
2. Definindo a estrutura da grade:
CSS
.container {
display: grid;
grid-template-columns: 100px 200px 100px; /* Define três colunas de larguras diferentes */
grid-template-rows: 50px 100px; /* Define duas linhas de alturas diferentes */
}
3. Combinando células usando grid-area:
CSS
.item1 {
grid-area: 1 / 1 / 2 / 4; /* O elemento ocupa a primeira linha e as três primeiras colunas */
}
4. Posicionamento automático de elementos:
CSS
.container {
display: grid;
grid-auto-rows: minmax(100px, auto); /* Define altura mínima das linhas */
}
1.3 Exemplos
Layout simples com CSS Grid:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemplo de CSS Grid</title>
<style>
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 100px 200px;
gap: 10px;
}
.item {
background-color: lightblue;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
</div>
</body>
</html>
Explicação:
- O container .container define três colunas, sendo a primeira e a terceira ocupando a mesma proporção do espaço disponível, e a segunda o dobro
- Define duas linhas com altura fixa
- A propriedade gap define a distância entre as células da grade
GO TO FULL VERSION