6.1 Propriedade grid-gap
O CSS Grid Layout oferece ferramentas flexíveis para gerenciar o espaço entre os elementos da grade. As propriedades
grid-gap, grid-row-gap e grid-column-gap permitem definir facilmente a distância
entre linhas e colunas, o que ajuda a criar layouts limpos e organizados. Vamos analisar essas propriedades em mais detalhes.
A propriedade grid-gap (abreviada como gap) define a distância geral entre linhas e colunas na grade.
Esta propriedade é uma forma abreviada de grid-row-gap e grid-column-gap.
Sintaxe:
.grid-container {
grid-gap: value;
}
Onde:
-
value: valor do intervalo entre linhas e colunas. Pode ser especificado em várias unidades de medida (px,%,fr,autoe assim por diante)
Exemplo 1: Valor único para linhas e colunas
Neste exemplo, o intervalo de 20px será aplicado tanto às linhas quanto às colunas:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
grid-gap: 20px; /* Espaço de 20px entre todas as linhas e colunas */
}
Exemplo 2: Diferentes valores para linhas e colunas
Neste exemplo, dois valores são usados: o primeiro (10px) para linhas, o segundo (20px) para colunas:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
grid-gap: 10px 20px; /* 10px entre linhas, 20px entre colunas */
}
6.2 Propriedade grid-row-gap
A propriedade grid-row-gap define a distância entre as linhas na grade. Isso permite definir um valor separado
para o intervalo entre linhas, independentemente das colunas.
Sintaxe:
.grid-container {
grid-row-gap: value;
}
Onde:
value: valor do intervalo entre linhas. Pode ser especificado em várias unidades de medida
Exemplo 1: Definindo um intervalo fixo entre linhas
Neste exemplo, a distância entre as linhas será 15px:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
grid-row-gap: 15px; /* Espaço de 15px entre as linhas */
}
Exemplo 2: Usando porcentagens para definir o intervalo
Neste exemplo, a distância entre as linhas será 5% da altura da linha:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
grid-row-gap: 5%; /* Espaço de 5% da altura da linha */
}
6.3 Propriedade grid-column-gap
A propriedade grid-column-gap define a distância entre as colunas na grade. Isso permite definir um valor separado
para o intervalo entre colunas, independentemente das linhas.
Sintaxe:
.grid-container {
grid-column-gap: value;
}
Onde:
value: valor do intervalo entre colunas. Pode ser especificado em várias unidades de medida
Exemplo 1: Definindo um intervalo fixo entre colunas
Neste exemplo, a distância entre as colunas será 25px:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
grid-column-gap: 25px; /* Espaço de 25px entre as colunas */
}
Exemplo 2: Usando em para definir o intervalo
Neste exemplo, a distância entre as colunas será 2em:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
grid-column-gap: 2em; /* Espaço de 2em entre as colunas */
}
6.4 Uso combinado de grid-row-gap e grid-column-gap
Você pode combinar as propriedades grid-row-gap e grid-column-gap para um controle mais preciso
dos intervalos entre linhas e colunas.
Exemplo de implementação completa:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* Três colunas de largura igual */
grid-template-rows: repeat(3, 100px); /* Três linhas de altura fixa */
grid-row-gap: 15px; /* Espaço de 15px entre as linhas */
grid-column-gap: 25px; /* Espaço de 25px entre as colunas */
}
.grid-item {
background-color: #3498db;
color: white;
padding: 20px;
text-align: center;
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>Exemplo de uso de grid-gap, grid-row-gap e grid-column-gap</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:
-
.grid-container: cria um contêiner Grid com três colunas de largura igual e três linhas de altura fixa. Usa as propriedadesgrid-row-gapegrid-column-gappara definir os espaços entre as linhas e colunas -
.grid-item: define estilos básicos para os elementos da grade, como cor de fundo, cor do texto, espaçamento, centralização de texto e borda
GO TO FULL VERSION