Grid (sistema de grade)

A estrutura invisível de colunas, linhas e gutters que mantém o layout alinhado e consistente.

Hard

O que é

Grid é o esqueleto por trás de uma interface organizada. Ele divide a tela em colunas, linhas e gutters, e dá um quadro consistente pra você decidir onde cada elemento vai e como eles se relacionam no espaço.

O grid não dita a aparência, e sim a lógica que mantém tudo alinhado e coerente, mesmo quando os tipos de conteúdo são bem diferentes entre si. O grid de 12 colunas virou padrão justamente porque divide bem em metades, terços e quartos.

O valor dele está na previsibilidade e na colaboração. Quem usa o produto aprende sem perceber onde achar as coisas, e designer e dev passam a falar a mesma língua de espaço, então o que foi desenhado vira código com menos achismo no meio. Ele é também a base do responsivo, porque define como as colunas se comportam em cada breakpoint.

Em uma frase

Vamos resolver isso no grid de 12 colunas, fica previsível e o dev traduz sem achismo.

A pergunta que ele responde

Como mantenho o layout alinhado e previsível em desktop, tablet e celular?

Quando usar

Ajuda em qualquer layout que precise de consistência e de um comportamento responsivo previsível.

Como não usar

O cuidado é não tratar o grid como camisa de força, forçando dentro dele um conteúdo que na verdade pedia uma estrutura diferente.

Na prática

Pense num layout de 12 colunas no desktop que vira 8 no tablet e 4 ou 1 no celular. O conteúdo se reorganiza de forma previsível em cada breakpoint, sem surpresa pra quem navega.

Não confunda com

Vale separar grid de layout. O grid é a estrutura de referência, a grade invisível que está por baixo. O layout é a disposição concreta dos elementos em cima dessa estrutura. Pense no grid como a pauta do caderno e no layout como o que você de fato escreve sobre ela.

D

Em inglês

Grid System

Pronúncia

grid

Também chamado de

grid, sistema de grade, grade

Origem

Herdado do design editorial e gráfico; codificado em frameworks como Bootstrap e Material Design.

Fonte

Saiba mais

Material Design, guidelines sobre layout grid responsivo