3.1 Propriedade grid-template-columns
O CSS Grid Layout permite criar layouts complexos de páginas web usando linhas e colunas. Duas propriedades chave para definir a estrutura da grade são grid-template-rows e grid-template-columns. Essas propriedades permitem definir o número e tamanho das linhas e colunas no container Grid, dando aos desenvolvedores controle total sobre o layout dos elementos.
A propriedade grid-template-columns define o número e tamanhos das colunas na grade. Ela aceita um ou mais valores, que podem ser especificados em várias unidades de medida, como pixels (px), percentagens (%), unidades de flexibilidade (fr), e outras.
Exemplo 1: Definindo tamanhos fixos de colunas
Neste exemplo, a grade consistirá em três colunas. A primeira coluna tem largura de 100px, a segunda coluna largura de 200px, e a terceira coluna largura de 100px:
.grid-container {
display: grid;
grid-template-columns: 100px 200px 100px; /* Três colunas com tamanhos fixos */
}
Exemplo 2: Utilizando unidades de flexibilidade (fr)
Neste exemplo, a grade consistirá em três colunas. A primeira e a terceira coluna ocuparão a mesma quantidade de espaço, e a segunda coluna será duas vezes mais larga que cada uma delas:
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr 1fr; /* Três colunas com tamanhos flexíveis */
}
Exemplo 3: Utilizando repetição (repeat)
Neste exemplo, a função repeat é utilizada para simplificar a declaração. A grade consistirá em três colunas de largura igual:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* Três colunas iguais */
}
Exemplo 4: Definindo tamanhos mínimos e máximos (minmax)
Neste exemplo, cada uma das três colunas terá uma largura mínima de 100px e um tamanho flexível, que poderá aumentar até 1fr dependendo do espaço disponível:
.grid-container {
display: grid;
grid-template-columns: repeat(3, minmax(100px, 1fr)); /* Três colunas com largura mínima de 100px e tamanhos flexíveis */
}
3.2 Propriedade grid-template-rows
A propriedade grid-template-rows é similar à grid-template-columns, mas define o número e tamanhos das linhas na grade. Ela também aceita um ou mais valores, que podem ser especificados em várias unidades de medida.
Exemplo 1: Definindo tamanhos fixos de linhas
Neste exemplo, a grade consistirá em três linhas. A primeira linha tem altura de 50px, a segunda linha altura de 100px, e a terceira linha altura de 50px:
.grid-container {
display: grid;
grid-template-rows: 50px 100px 50px; /* Três linhas com tamanhos fixos */
}
Exemplo 2: Utilizando unidades de flexibilidade (fr)
Neste exemplo, a grade consistirá em três linhas. A primeira e a terceira linhas ocuparão a mesma quantidade de espaço, e a segunda linha será duas vezes mais alta que cada uma delas:
.grid-container {
display: grid;
grid-template-rows: 1fr 2fr 1fr; /* Três linhas com tamanhos flexíveis */
}
Exemplo 3: Utilizando repetição (repeat)
Neste exemplo, a função repeat é utilizada para simplificar a declaração. A grade consistirá em três linhas de altura igual:
.grid-container {
display: grid;
grid-template-rows: repeat(3, 1fr); /* Três linhas iguais */
}
Exemplo 4: Definindo tamanhos mínimos e máximos (minmax)
Neste exemplo, cada uma das três linhas terá uma altura mínima de 50px e um tamanho flexível, que poderá aumentar até 1fr dependendo do espaço disponível:
.grid-container {
display: grid;
grid-template-rows: repeat(3, minmax(50px, 1fr)); /* Três linhas com altura mínima de 50px e tamanhos flexíveis */
}
3.3 Combinando propriedades
Combinando propriedades grid-template-rows e grid-template-columns
Essas propriedades podem ser usadas juntas para criar grades complexas com tamanhos diferentes de linhas e colunas.
Neste exemplo, a grade consistirá em duas colunas: a primeira coluna ocupará 1 parte do espaço disponível, e a segunda coluna — 2 partes. A grade também será composta por duas linhas: a primeira linha com altura de 100px, a segunda linha com altura de 200px.
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr;
grid-template-rows: 100px 200px;
}
Exemplo de implementação completa:
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr;
grid-template-rows: 100px 200px;
gap: 10px;
}
.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 CSS Grid</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="grid-container">
<div class="grid-item">Elemento 1</div>
<div class="grid-item">Elemento 2</div>
<div class="grid-item">Elemento 3</div>
<div class="grid-item">Elemento 4</div>
</div>
</body>
</html>
Explicação do código:
.grid-container: define o container como um grid-container com duas colunas e duas linhas. Os espaços entre os elementos são definidos pela propriedadegap.grid-item: define os estilos básicos para os elementos do grid, como cor de fundo, cor do texto, espaçamento interno, centralização do texto e borda
GO TO FULL VERSION