4.1 Propriedade grid-column
CSS Grid Layout fornece ferramentas incríveis para gerenciar o posicionamento dos elementos na grade. Uma das
principais ferramentas são as propriedades grid-row e grid-column. Essas propriedades permitem que desenvolvedores digam exatamente
quais linhas e colunas os elementos da grid devem ocupar, proporcionando flexibilidade e controle sobre o layout.
A propriedade grid-column define quais colunas o elemento ocupará no grid-container.
Sintaxe:
.grid-item {
grid-column: start / end;
}
Onde:
start: linha inicial da gradeend: linha final da grade
Exemplo 1: Posicionando um elemento em uma coluna específica
Neste exemplo, o elemento será posicionado entre a segunda e a terceira linha da grade, ocupando a segunda coluna:
.grid-item {
grid-column: 2 / 3; /* Elemento ocupa o espaço entre a segunda e a terceira linha da grade */
}
Exemplo 2: Elemento ocupando várias colunas
Neste exemplo, o elemento ocupará três colunas, começando na primeira linha e terminando na quarta linha da grade:
.grid-item {
grid-column: 1 / 4; /* Elemento ocupa o espaço da primeira à quarta linha da grade */
}
Exemplo 3: Usando span para cobrir várias colunas
Neste exemplo, o elemento ocupará duas colunas, começando da posição atual:
.grid-item {
grid-column: span 2; /* Elemento ocupa duas colunas, começando da posição atual */
}
4.2 Propriedade grid-row
A propriedade grid-row define quais linhas o elemento ocupará no grid-container.
Sintaxe:
.grid-item {
grid-row: start / end;
}
Onde:
start: linha inicial da gradeend: linha final da grade
Exemplo 1: Posicionando um elemento em uma linha específica
Neste exemplo, o elemento será posicionado entre a primeira e a segunda linha da grade, ocupando a primeira linha:
.grid-item {
grid-row: 1 / 2; /* Elemento ocupa o espaço entre a primeira e a segunda linha da grade */
}
Exemplo 2: Elemento ocupando várias linhas
Neste exemplo, o elemento ocupará duas linhas, começando na segunda linha e terminando na quarta linha da grade:
.grid-item {
grid-row: 2 / 4; /* Elemento ocupa o espaço da segunda à quarta linha da grade */
}
Exemplo 3: Usando span para cobrir várias linhas
Neste exemplo, o elemento ocupará três linhas, começando da posição atual:
.grid-item {
grid-row: span 3; /* Elemento ocupa três linhas, começando da posição atual */
}
Exemplo 4. Usando valores negativos
.element {
grid-row: 1 / -1; /* Elemento começa na primeira linha e termina na última */
}
4.3 Combinando propriedades grid-row e grid-column
Para criar layouts mais complexos, você pode combinar as propriedades grid-row e grid-column
para controlar precisamente o posicionamento dos elementos.
Exemplo: Layout complexo usando grid-row e grid-column
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Row and Column Example</title>
<style>
.container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4, 100px);
gap: 10px;
}
.item1 {
background-color: lightblue;
grid-row: 1 / 3; /* Elemento ocupa a primeira e segunda linhas */
grid-column: 1 / 3; /* Elemento ocupa a primeira e segunda colunas */
}
.item2 {
background-color: lightgreen;
grid-row: 3 / 5; /* Elemento ocupa a terceira e quarta linhas */
grid-column: 2 / 5; /* Elemento ocupa a segunda, terceira, e quarta colunas */
}
.item3 {
background-color: lightcoral;
grid-row: 1 / 2; /* Elemento ocupa a primeira linha */
grid-column: 3 / 5; /* Elemento ocupa a terceira e quarta colunas */
}
</style>
</head>
<body>
<div class="container">
<div class="item1">Item 1</div>
<div class="item2">Item 2</div>
<div class="item3">Item 3</div>
</div>
</body>
</html>
Explicação:
- O container
.containertem quatro linhas e quatro colunas, cada uma ocupando o mesmo espaço - O elemento
.item1ocupa as duas primeiras linhas e as duas primeiras colunas - O elemento
.item2ocupa a terceira e quarta linhas e a segunda, terceira e quarta colunas - O elemento
.item3ocupa a primeira linha e a terceira e quarta colunas
GO TO FULL VERSION