Grid de colunas para iniciantes

O grid é uma estrutura invisível de colunas e margens que organiza os elementos de uma página.

As partes

• Margens: o espaço entre o conteúdo e a borda.
• Colunas: as faixas onde o conteúdo se apoia.
• Medianiz (gutter): o espaço entre colunas.

Como começar

1. Defina as margens.
2. Escolha um número de colunas: 12 é flexível, porque divide em 2, 3, 4 e 6.
3. Alinhe tudo às colunas: textos, imagens, botões.

Quebrando o grid

Um elemento que sai do grid chama atenção. Use esse efeito com intenção, depois de dominar a hierarquia visual.