CSS: Prática Grid CSS
Última atualização: 2026-10-13
1. Sistema de Grid de 12 Colunas
O grid de 12 colunas é um sistema de layout clássico no desenvolvimento web. Veja como implementá-lo com CSS Grid:
▶ Exemplo
▶ Experimente2. Padrões de Layout Comuns
(1) Layout Santo Graal
O padrão de layout de página mais comum:
▶ Exemplo
▶ Experimente(2) Grid de Cards Responsivo
▶ Exemplo
▶ Experimente❓ Perguntas Frequentes
P Por que sistemas de grid usam 12 colunas?
R 12 é divisível por 2, 3, 4 e 6 — máxima flexibilidade. Você pode criar proporções 1/2, 1/3, 1/4, 1/6, 2/3, 3/4. Bootstrap e outros frameworks usam grids de 12 colunas — é o padrão da indústria.
P Grid escrito à mão vs grid Bootstrap?
R Escrever à mão ajuda a entender os princípios; Bootstrap é uma implementação empacotada. Projetos reais usam Bootstrap para eficiência, mas entender princípios ajuda quando frameworks não atendem necessidades específicas.
P Grid Flex vs Grid Grid — qual é melhor?
R Cada um tem pontos fortes. Flex serve para arranjos unidimensionais mas não pode alinhar entre linhas. Grid tem capacidades bidimensionais mais fortes. Para distribuição simples de linhas, Flex é suficiente; para alinhamento de linhas de grid, use Grid.
📖 Resumo
- Sistemas de grid são uma solução de layout clássica testada pelo tempo
- Implementar um grid de 12 colunas com Flexbox não é complexo — a chave é entender larguras percentuais e flex-wrap
- 12 colunas oferecem combinações flexíveis com breakpoints responsivos
- Embora muitos projetos usem grids Bootstrap ou Tailwind, implementar uma vez por si mesmo realmente ensina os princípios subjacentes
📝 Exercícios
- Implemente um sistema de grid completo de 12 colunas, crie uma página HTML mostrando diferentes combinações de colunas (3-3-3-3, 4-4-4, 2-8-2, etc.).
- Use grid responsivo para mostrar coluna única no mobile, duas no tablet, quatro no desktop.
- Use
col-offset-3para centralizar um bloco de conteúdo na página. - Re-implemente o grid de 12 colunas usando Grid, compare diferenças de código.
