Propriedades grid-template-rows e grid-template-columns
Para criar layouts precisos e flexíveis com CSS Grid, dominar as propriedades grid-template-rows e grid-template-columns é essencial. Vamos explorar essas ferramentas fundamentais de forma clara e prática.
Definindo Linhas e Colunas
As propriedades grid-template-rows e grid-template-columns são usadas para estabelecer a estrutura básica do grid. Elas aceitam valores como porcentagens, pixels, fr (frações) e até mesmo auto para se ajustar automaticamente ao conteúdo. Veja um exemplo:
.grid-container {
display: grid;
grid-template-rows: 100px auto 2fr; /* Três linhas com alturas diferentes */
grid-template-columns: 1fr 2fr; /* Duas colunas, a primeira com 1 parte e a segunda com 2 partes */
}
Utilizando Frações (fr)
A unidade fr é especialmente útil para distribuir o espaço disponível entre as colunas de forma proporcional. Isso facilita a criação de layouts flexíveis e responsivos:
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr 1fr; /* Três colunas, distribuídas proporcionalmente */
}
Combinando Unidades
Você pode combinar diferentes unidades para criar layouts complexos. Por exemplo, uma grade com três colunas, sendo a primeira e a terceira com uma largura fixa e a segunda ocupando o espaço restante:
.grid-container {
display: grid;
grid-template-columns: 200px 1fr 200px; /* Três colunas, a primeira e a terceira com 200px, a segunda ocupando o restante */
}
Agora vamos colocar tudo que vimos até aqui em um exemplo:
<!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: 100px auto 2fr;
grid-template-columns: 1fr 2fr;
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;
}
/* 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">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
</div>
</body>
</html>
Coloque esse código e faça modificações para praticar. Então, vamos seguir!
