Grid responsivo

Sistema de grade flexível que adapta o conteúdo a cada tamanho de tela mantendo a ordem.

Hard

O que é

Grid responsivo é o sistema de layout que usa coluna, linha e espaçamento flexíveis pra ajustar o design de forma fluida entre tamanhos de tela. É a estrutura que mantém o conteúdo organizado tanto no monitor grande quanto no celular.

O grid dá ordem e alinhamento, funcionando como âncoras previsíveis pra organizar os elementos. Sem ele, o layout vira bagunça conforme escala pra outras telas. Com coluna, calha e margem proporcionais, ele cria um ritmo visual que guia o olho de quem lê.

A diferença pro grid estático está na fluidez. O estático tem dimensão fixa e só funciona bem em telas específicas, aquelas pra que ele foi pensado. O responsivo adapta sozinho, por porcentagem e breakpoint. Uma grade de três colunas no desktop colapsa pra uma no celular sem perder o equilíbrio.

Em uma frase

Vamos montar a galeria num grid responsivo, que colapsa de três colunas pra uma no celular sem perder o alinhamento.

A pergunta que ele responde

Como mantenho o layout alinhado e organizado quando ele precisa rodar em telas de tamanhos diferentes?

Quando usar

Ajuda na hora de estruturar layout que precisa manter ordem e alinhamento em telas de tamanhos diferentes.

Como não usar

O cuidado é não usar grid estático achando que ele resolve o responsivo, nem cobrir o layout de media query desnecessária pra forçar um ajuste que o grid já daria sozinho.

Na prática

Pense numa grade de cards em três colunas no desktop que, no celular, vira uma coluna só. Mesmo assim, ela mantém o alinhamento e a hierarquia do conteúdo, sem virar bagunça.

Não confunda com

Vale separar grid responsivo de grid estático. O responsivo é fluido e se adapta por proporção e breakpoint, mudando junto com a tela. O estático tem dimensão fixa e só serve bem a telas específicas, aquelas pra que foi desenhado. Um se molda à tela; o outro fica do mesmo tamanho onde quer que apareça.

Design

Em inglês

Responsive Grids

Pronúncia

rés-pon-siv grids

Também chamado de

grid responsivo, grade responsiva

Origem

n/a

Fonte

Saiba mais

Material Design, diretrizes sobre responsive layout grid