Estrutura de Linhas e Colunas
Neste módulo, aprenderemos os fundamentos do CSS Grid, começando com a criação de linhas e colunas. O CSS Grid é uma estrutura essencial para criar layouts flexíveis e organizados em páginas web.
Definindo a Estrutura
Ao utilizar o CSS Grid, você precisa pensar na grade como uma tabela invisível. Com as propriedades display: grid e grid-template-rows/grid-template-columns, você define o número e tamanho das linhas e colunas. Veja como é simples:
.grid-container {
display: grid;
grid-template-rows: 100px 200px; /* Duas linhas de altura 100px e 200px */
grid-template-columns: 1fr 2fr; /* Duas colunas, a primeira com 1 parte e a segunda com 2 partes */
}
Tamanho Flexível com “fr”
A unidade fr é poderosa para criar layouts flexíveis. Ela distribui o espaço disponível proporcionalmente entre as colunas. Por exemplo:
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr 1fr; /* Três colunas, a primeira e a terceira com 1 parte, e a segunda com 2 partes */
}
Linhas Automáticas
Se não especificarmos o número de linhas, o CSS Grid adiciona automaticamente conforme necessário. Isso é útil quando o conteúdo pode variar. Veja:
.grid-container {
display: grid;
grid-template-rows: auto; /* Linhas adicionadas automaticamente conforme o conteúdo */
}
Entendendo essa estrutura, você estará preparado para explorar propriedades específicas de linhas e colunas no próximo tópico.
