Blog ComercialWeb - São Paulo - SP
E-mail: [email protected]
E-mail: [email protected]
Este guia apresenta técnicas de posicionamento, alinhamento e espaçamento, além de dicas para um design adaptável a diferentes tamanhos de tela.
Simplifique seu processo de criação com o poderoso CSS Grid e melhore a experiência do usuário em dispositivos móveis e desktops.
O Grid Layout é um sistema de posicionamento bidimensional que permite criar layouts complexos e responsivos. Ele organiza elementos em linhas e colunas e facilita o alinhamento e a distribuição do conteúdo.
Para começar, aplique display: grid no contêiner e defina colunas/linhas com grid-template-columns e grid-template-rows.
Exemplo:
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
Nesse caso, 1fr representa uma fração do espaço disponível — cada coluna ocupa um terço da largura.
Use grid-row-start/end e grid-column-start/end para definir a posição dos itens.
.item {
grid-row-start: 1;
grid-row-end: 2;
grid-column-start: 1;
grid-column-end: 3;
}
Você também pode abreviar com grid-area, definindo todas as posições em uma única declaração.
Controle alinhamento dos itens com justify-items (horizontal) e align-items (vertical). Use gap (ou grid-gap) para espaçamento.
.container {
justify-items: center;
align-items: center;
gap: 10px 20px;
}
Áreas nomeadas facilitam reordenar o layout conforme o tamanho de tela.
.container {
display: grid;
grid-template-areas:
"header header header"
"sidebar content content"
"footer footer footer";
}
@media (max-width: 768px) {
.container {
grid-template-areas:
"header"
"content"
"sidebar"
"footer";
}
}
Em telas maiores, o cabeçalho ocupa três colunas; já em telas menores, o layout empilha as áreas verticalmente.
Use a unidade fr para distribuir espaço de forma flexível.
.container {
display: grid;
grid-template-columns: 1fr 2fr;
}
No exemplo, a primeira coluna ocupa 1 parte e a segunda 2 partes do espaço disponível.
O CSS Grid também oferece recursos como linhas implícitas, sobreposição e reordenação. Combinando essas técnicas, você constrói interfaces ricas e adaptáveis.
