Linha (row)

Agrupamento horizontal de elementos, usado pra alinhar conteúdo em layouts e tabelas.

Hard

O que é

Linha é o agrupamento horizontal de elementos numa tela. Em layout, ela organiza o conteúdo lado a lado, como num menu, numa fileira de cards ou numa lista. Já em tabela, cada linha representa um registro inteiro, como um cliente ou um pedido, com seus campos distribuídos nas colunas.

Junto com a coluna, a linha forma a base do grid responsivo. Enquanto a linha define o que fica na horizontal, o layout decide se aquilo continua lado a lado no desktop ou empilha no celular.

Uma linha bem alinhada deixa a tela fácil de varrer com o olho. Quando esse alinhamento quebra, a informação passa a parecer bagunçada e dá bem mais trabalho de ler.

Em uma frase

Essa fileira é uma linha de três cards que fica lado a lado no desktop e empilha numa coluna só no celular.

A pergunta que ele responde

Como organizo conteúdo lado a lado numa tela de um jeito que se ajuste ao celular?

Quando usar

Ajuda na hora de estruturar layout, montar tabela ou desenhar um grid responsivo.

Como não usar

O cuidado é não empilhar tudo sem alinhar as linhas, o que deixa a leitura confusa, nem ignorar como a linha vai se comportar no celular.

Na prática

Pense numa fileira de três cards de produto que fica lado a lado no desktop e empilha em uma coluna só no celular. Isso é a linha se adaptando ao espaço disponível.

Não confunda com

Vale separar linha de coluna, já que as duas costumam ser confundidas. A linha agrupa na horizontal, enquanto a coluna divide na vertical, e é justamente o encontro das duas que forma o grid.

Design

Em inglês

Rows

Pronúncia

rôu

Também chamado de

row, linha de grid, linha de tabela

Origem

n/a

Fonte

Saiba mais

Material Design, documentação sobre o layout grid