Posicionamento de Elementos com grid-row e grid-column
No universo do CSS Grid, o posicionamento preciso de elementos é alcançado através das propriedades grid-row e grid-column. Vamos entender de forma simples como essas propriedades funcionam.
Identificando Linhas e Colunas
Com o CSS Grid, linhas e colunas são numeradas a partir de 1. Para posicionar um elemento em uma grade, utilizamos grid-row e grid-column seguidos do número da linha ou coluna desejada. Exemplo:
.item1 {
grid-row: 1; /* Este elemento estará na primeira linha */
grid-column: 2; /* E na segunda coluna */
}
Intervalos de Posicionamento
Além de posicionar em linhas ou colunas específicas, podemos definir intervalos usando a propriedade span. Isso indica quantas linhas ou colunas o elemento deve abranger. Exemplo:
.item2 {
grid-row: 2 / span 2; /* Este elemento começará na segunda linha e se estenderá por duas linhas */
grid-column: 1 / span 3; /* E ocupará três colunas a partir da primeira */
}
Simplificando com Shorthand
Para tornar o código mais conciso, podemos usar uma propriedade de shorthand chamada grid-area. Isso combina grid-row-start, grid-row-end, grid-column-start e grid-column-end. Exemplo:
.item3 {
grid-area: 2 / 3 / span 1 / span 2; /* Este elemento começará na segunda linha, terá 1 de altura e ocupará duas colunas a partir da terceira */
}
Vamos ver um código completo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.grid-container {
display: grid;
gap: 10px;
grid-template-rows: repeat(3, 100px);
grid-template-columns: repeat(3, 1fr);
height: 400px; /* Apenas para visualização, ajuste conforme necessário */
}
.grid-item {
background-color: #3498db;
color: white;
text-align: center;
padding: 20px;
border-radius: 5px;
}
.item1 {
grid-row: 1;
grid-column: 2;
}
.item2 {
grid-row: 2 / span 2;
grid-column: 1 / span 3;
}
.item3 {
grid-area: 2 / 3 / span 1 / span 2;
}
/* Estilo extra para visualização */
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item item1">1</div>
<div class="grid-item item2">2</div>
<div class="grid-item item3">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
</div>
</body>
</html>
