Colunas

Divisões verticais que organizam o conteúdo e dão estrutura ao layout.

Hard

O que é

Colunas dividem o conteúdo em seções verticais pra alinhar texto, imagem e outros elementos de um jeito lógico. Elas são a base de um layout limpo, porque criam ritmo, alinhamento e hierarquia sem que a pessoa precise sequer notar que a estrutura está ali sustentando tudo.

Em produto, as colunas são justamente o que torna o layout responsivo. Um desenho de três colunas no desktop pode virar uma única coluna no celular, mantendo a informação clara em qualquer tamanho de tela, porque a estrutura se reorganiza em vez de quebrar.

Colunas bem feitas também ajudam a acessibilidade. Quando você usa estrutura real de coluna, e não caixinhas de texto fingindo o efeito, o leitor de tela consegue percorrer o conteúdo na ordem certa.

Em uma frase

Vamos usar três colunas no desktop que colapsam pra uma só no celular.

A pergunta que ele responde

Como organizo o conteúdo da página pra ele ficar alinhado e funcionar em qualquer tela?

Quando usar

Use ao estruturar qualquer layout que precisa funcionar bem em telas de tamanhos diferentes, já que é a coluna que dá a flexibilidade pra isso.

Como não usar

O cuidado é não forjar colunas com caixas de texto soltas. Isso quebra o alinhamento e ainda bagunça a ordem de leitura pra quem usa leitor de tela.

Na prática

Pense numa página de notícias com três colunas no desktop que colapsa pra uma só no celular. A leitura continua óbvia nos dois tamanhos justamente porque as colunas se reorganizam.

Não confunda com

Vale separar coluna de grid. A coluna é uma das divisões verticais, enquanto o grid é o sistema inteiro que junta colunas, calhas e margens pra organizar a página. Ou seja, a coluna é uma peça dentro do grid, não o grid todo.

D

Em inglês

Columns

Pronúncia

n/a

Também chamado de

colunas de layout, grid de colunas

Origem

n/a

Fonte

Saiba mais

Material Design, documentação sobre layout responsivo e grid de colunas.