Sistemas de Grid: o Guia do Designer

Sistemas de grid são a parte do design que faz mais trabalho e recebe menos crédito. Todo produto que você respeita tem um, todo produto pelo qual você passa rolando a tela não tem. O grid não é decoração. É o contrato que mantém tipografia, hierarquia e ritmo juntos para que o usuário leia a página num único olhar, em vez de decodificá-la.

A escola suíça provou isso na impressão há sessenta anos. Müller-Brockmann, Hofmann, Ruder, uma geração inteira de designers que tratou o grid como ferramenta de pensamento, não como atalho de layout. A lição envelheceu melhor que quase qualquer outra peça de teoria do design. Todo grid de produto moderno, do Linear à Stripe e ao New York Times, descende da mesma ideia. Esta é a referência de trabalho para o grid em 2026.

Müller-Brockmann deu ao grid moderno a sua gramática

O livro de 1981 de Josef Müller-Brockmann, "Grid Systems in Graphic Design", continua sendo a espinha dorsal da disciplina. Antes do livro, grids existiam, mas o vocabulário não. Depois dele, designers passaram a ter uma linguagem comum para colunas, calhas, margens e módulos que atravessou estúdios, escolas e décadas.

A escola suíça tratava o grid como um motor de restrições. Escolha um sistema, mantenha-o e deixe a variação vir do conteúdo, não da improvisação. Os pôsteres de Müller-Brockmann para o Tonhalle de Zurique parecem capturas de tela de UI de produto em 2026 porque rodam a mesma lógica.

Tipografia forte num grid fixo. Espaço em branco como elemento estrutural, não como sobra. A mesma lógica aparece hoje em textos como por que todo SaaS parece igual em 2026, em que a homogeneidade é o grid vencendo e depois perdendo a mordida.

A web herdou essa gramática devagar. O CSS nos deu floats, depois Flexbox, e por fim o CSS Grid. Cada passo fechou a distância entre o que designers de impressão faziam em 1961 e o que desenvolvedores front-end conseguiam fazer num navegador.

O vocabulário não mudou. Colunas ainda são colunas. As ferramentas é que alcançaram.

Por que grids funcionam, em um parágrafo

Um grid funciona porque tira mil pequenas decisões do designer e as devolve ao usuário como previsibilidade. O olho aprende o ritmo no primeiro segundo da página e usa esse ritmo para navegar por tudo o que vem depois.

Sem grid, toda decisão de layout é inédita. Onde fica o título, onde a imagem termina, qual a largura do texto, como a barra lateral se relaciona com a coluna principal. Com grid, essas respostas já vêm decididas.

O designer gasta atenção em hierarquia e conteúdo, em vez de remedir cada bloco. O usuário gasta atenção na mensagem, em vez de decodificar a estrutura. Esse é o acordo inteiro.

Os cinco tipos de grid, num só lugar

A maioria das equipes trata "grid" como uma decisão só. São cinco. Cada um resolve um problema de layout diferente e falha por um motivo diferente. Escolha errado e a página briga com você para sempre.

Esta tabela é o seu marcador de página. A maioria das discordâncias sobre layout acaba no momento em que a equipe concorda sobre qual desses cinco está rodando.

O grid de colunas é o cavalo de batalha

Grids de colunas são o padrão para quase tudo que você publica na web. Colunas verticais, calhas fixas, margens opcionais. O conteúdo flui para dentro das colunas, os blocos de layout ocupam uma ou mais delas, e o ritmo é definido pelo número de colunas em que o canvas é dividido.

A Stripe roda um grid de 12 colunas em toda a superfície de marketing. O shell do app do Linear é construído sobre um grid de colunas que se encaixa numa trilha única no mobile e se expande para barra lateral mais coluna principal no desktop. As páginas de marketing da Vercel usam um grid de 12 colunas com espaço negativo deliberado, e as colunas ficam visíveis se você apertar os olhos para a matriz de preços do dashboard ou o layout do log de deploy. O mesmo grid que movia pôsteres em 1961 move sites de marketing em 2026, só que com media queries por baixo.

Pule o grid de colunas apenas quando o layout for fundamentalmente não retangular, o que na web quase nunca acontece. A análise da stack de site de marketing em 2026 cobre as escolhas de framework que ficam por cima desse grid.

O grid modular é para densidade editorial

Um grid modular divide o canvas em células nas duas direções, colunas e linhas. Parece uma folha de papel quadriculado e se comporta como uma. Os blocos de layout se encaixam nos limites das células, e a densidade vira uma alavanca de design em vez de um acidente.

A homepage do New York Times é o grid modular canônico da web. Manchetes, fotos, resumos e anúncios ficam em células que compartilham larguras e alturas consistentes, mesmo que a composição visível pareça variada. O Bloomberg Terminal leva o grid modular ao extremo, com uma densidade de informação que desabaria sem disciplina estrita de células. A visão em galeria do Notion entrega um grid modular mais suave, com cartões que se encaixam numa largura de célula fixa enquanto o conteúdo se adapta por dentro.

Use um grid modular quando a página tiver muitas unidades pequenas e comparáveis que precisam ser lidas como um sistema. Pule quando o conteúdo for um ou dois blocos grandes, em que um grid de colunas faz o mesmo trabalho com menos cerimônia. Um grid modular rodando dois cartões parece um grid de colunas usando fantasia.

O grid de linha de base é o motor do ritmo

Um grid de linha de base é um grid horizontal que controla o ritmo vertical. Cada linha de texto assenta numa régua de linha de base, cada título cai num múltiplo dessa régua, e a página se lê com uma cadência musical discreta que o usuário sente mas nunca nomeia.

As páginas de marketing da Apple rodam um grid de linha de base estrito. Abra qualquer página de produto e veja como o título, o subtítulo, a imagem e o texto compartilham um ritmo vertical comum. O Medium entrega alinhamento de linha de base no template de leitura longa, e é por isso que a leitura parece fácil até num ensaio de 4000 palavras. A Stripe Press, o braço editorial, roda ritmo de linha de base em cada página que imprime e em cada página que publica na web.

A matemática na web é simples. Escolha uma unidade base, geralmente 8 pixels. Defina o line-height do corpo como um múltiplo, geralmente 24 pixels, que é 1,5 de um texto de 16 pixels.

Os títulos caem em múltiplos também, então um H1 de 48 pixels com line-height de 56 pixels continua encaixado no mesmo ritmo. A página inteira zumbe numa batida só.

O grid hierárquico é para a ordem de leitura

Um grid hierárquico é um grid customizado construído em torno da prioridade intrínseca do conteúdo. Em vez de partir de colunas e linhas, você parte do que deve ser lido primeiro, segundo, terceiro. O layout se encaixa nessas decisões, não num template genérico.

As páginas de lançamento de produto da Apple são grids hierárquicos na prática. O elemento hero recebe espaço desproporcional, o conteúdo secundário fica em agrupamentos compactos, e o conteúdo terciário vive numa coluna mais estreita perto do fim. As grandes matérias do New York Times, as peças multimídia de rolagem longa, são grids hierárquicos desenhados cena por cena. A homepage da Anthropic roda um grid hierárquico em que uma afirmação domina e todo o resto é dimensionado como apoio.

Grids hierárquicos são o tipo de grid que exige mais julgamento editorial. Eles falham quando designers os usam como desculpa para pular a disciplina de um grid de colunas ou modular. Um grid hierárquico não é "sem grid". É um grid em que as prioridades definem a geometria.

Se a sua hierarquia está errada, o grid está errado. A lógica mais profunda da prioridade está em design de hierarquia visual.

O grid de manuscrito é para leitura longa

Um grid de manuscrito é uma coluna. Esse é o grid inteiro. Um único bloco de texto descendo pela página com margens bem pensadas, uma medida deliberada e nada mais competindo pelo olho.

Os livros da Stripe Press são grids de manuscrito em papel. As páginas de doc do Notion são grids de manuscrito no navegador. A visão de leitor do Substack, as leituras longas da Apple Newsroom, as matérias da Magazine do New York Times em modo de coluna única, todos rodam o mesmo grid. O livro sabe entregar leitura longa há cinco séculos. A web alcançou quando paramos de tentar pôr uma barra lateral ao lado de um ensaio de 4000 palavras.

A restrição é a medida, o comprimento da linha. Mire em 65 a 75 caracteres. Mais largo e o olho perde a linha na volta. Mais estreito e o ritmo fica picotado.

A outra restrição é a margem. Margens laterais generosas não são espaço desperdiçado, são a moldura que deixa o olho do leitor relaxar. O verbete do glossário sobre espaço em branco explica por que essas margens fazem trabalho de verdade.

O sistema de 12 colunas move a web moderna

O grid de 12 colunas é o padrão porque 12 é o menor número mais divisível. Ele se divide limpo em 1, 2, 3, 4, 6 e 12. Isso cobre quase todo padrão de layout de que um site de marketing ou UI de produto precisa, sem recorrer a frações.

O Bootstrap codificou o grid de 12 colunas para a web em 2011 e nunca precisou pedir desculpas pela escolha. Os utilitários de grid do Tailwind vêm com 12 colunas por padrão. O grid responsivo do Material Design, o grid do Carbon Design, o Polaris da Shopify, todos de 12 colunas. A escolha não é acidente, é matemática.

Este é o guia de campo de 12 colunas que a maioria das equipes usa ou reinventa mal:

• 12 hero de largura total, banner, rodapé, conteúdo de ponta a ponta
• 8 + 4 conteúdo principal com barra lateral, o shell de app de produto canônico
• 6 + 6 blocos de conteúdo em dupla, linhas de features de marketing, seções de comparação
• 4 + 4 + 4 cartões em trio, planos de preço, grids de features em três colunas
• 3 + 3 + 3 + 3 logos em quarteto, grids de equipe, galerias de imagens
• 9 + 3 conteúdo com coluna fina de metadados, comum em layouts editoriais
• 2 + 8 + 2 conteúdo centralizado com respiro, usado em páginas de detalhe de marketing

Fixe esses padrões cedo e a equipe para de debater layout nas revisões de design. O padrão escolhe os spans, os spans escolhem a matemática, a matemática entrega a página. O argumento que vem em você não precisa de um design system é, em parte, que um grid enxuto faz a maior parte do que um design system diz fazer.

Ritmo de linha de base em telas, não só no papel

O alinhamento de linha de base é a parte da teoria do grid que a maioria das equipes pula na web porque o navegador não o impõe. Pule e a página fica nervosa por motivos que o usuário não sabe nomear. Mantenha e a página parece um produto acabado.

O truque é pensar em unidades verticais, não em pixels. Escolha uma base de 8 pixels. Todo padding, margin, line-height e altura de componente vira um múltiplo de 8.

Texto de corpo em 16 pixels com line-height de 24 pixels se encaixa no ritmo. H1 em 48 pixels com line-height de 56 pixels se encaixa. Padding de cartão em 24 pixels se encaixa. Espaçamento de seção em 96 pixels se encaixa. A página inteira vira um único instrumento afinado numa nota só, e o olho percorre tudo sem um único tropeço.

O Linear entrega ritmo de linha de base na lista de issues. O Notion entrega no leitor de docs. O produto Slides do Figma mantém o ritmo tanto nas miniaturas dos slides quanto no canvas do editor. As equipes que mantêm ritmo tendem a ser as que tratam tipografia como sistema, não como override de folha de estilo.

Grids responsivos sem pânico

Um grid responsivo é o mesmo grid rodando em larguras diferentes. Não é um design diferente a cada breakpoint, é a mesma composição colapsando de forma inteligente conforme o viewport encolhe.

A abordagem padrão é um grid de 12 colunas no desktop, 8 colunas no tablet, 4 colunas no mobile. Um layout 4 + 8 no desktop vira 4 + 4 no tablet e coluna única no mobile. Um layout em quarteto 3 + 3 + 3 + 3 vira 4 + 4 (duas linhas de dois) no tablet e 4 + 4 + 4 + 4 (quatro empilhados) no mobile. A matemática é consistente porque o número de colunas cai em frações limpas.

O site da Stripe é o grid responsivo de manual em produção. As páginas de marketing do Linear se reorganizam em três breakpoints sem um único layout que pareça espremido. A matriz de preços da Vercel se reorganiza colapsando a comparação lado a lado num accordion empilhado, que é o truque responsivo que a maioria das equipes nunca descobre: "responsivo" às vezes significa "mude o componente, não as colunas". O problema da página de preços cobre essa decisão em detalhe.

O erro é projetar mobile e desktop como dois layouts sem relação. As composições divergem, a marca se lê diferente no celular e no notebook, e a equipe acaba mantendo dois produtos. Projete o grid primeiro, depois projete os breakpoints como colapsos desse grid. O verbete do glossário sobre hero section cobre a parte do grid que os usuários veem primeiro em todo breakpoint.

A era do CSS Grid: as ferramentas de nível gráfico finalmente chegaram

O CSS Grid é a primeira vez em que o navegador teve uma primitiva de layout à altura do que designers de impressão faziam em 1961. Antes do CSS Grid, designers web tinham floats, Flexbox e muita paciência. Agora temos linhas de grid de verdade, áreas nomeadas, controle de gap e a capacidade de montar uma página como Müller-Brockmann montaria um pôster.

A mudança importa porque o que antes era uma decisão de build (qual grid de qual framework eu uso) agora é uma primitiva de layout embutida no navegador. display: grid mais grid-template-columns: repeat(12, 1fr) mais gap: 24px é um grid de 12 colunas. Sem framework. Sem classes utilitárias. Só CSS fazendo o que o CSS deveria ter feito uma década atrás.

Os utilitários de grid do Tailwind agora são um açúcar fino em cima do CSS Grid. O grid do Bootstrap é, em grande parte, uma camada de compatibilidade para um problema que não existe mais. As equipes que mais aproveitam o CSS Grid o tratam como ferramenta de design, não como plano B para o Flexbox.

O editor do Linear usa CSS Grid no layout do painel de issues. O editor web do Figma usa na estrutura do canvas. A Vercel usa na maior parte do site de marketing. A ferramenta está no kit, a pergunta é se o design system a está usando ou rodando padrões de 2018 numa infraestrutura de 2026.

Grids de produtos reais que valem estudo

O jeito mais rápido de internalizar sistemas de grid é inspecionar os produtos que os entregam bem. Cinco que merecem um olhar demorado.

Linear roda um grid de colunas enxuto no shell do app, um grid de 12 colunas no site de marketing e um ritmo de linha de base nos dois. A lista de issues, a visão de projeto, o painel de docs, tudo se encaixa no mesmo grid vertical e horizontal. É a implementação de grid de colunas mais limpa em UI de produto hoje.

Vercel roda um grid de 12 colunas com espaço negativo intencional. As páginas de marketing respiram, o dashboard roda um grid modular mais denso, e a visão de deploy, abordada em o estado de carregamento é o produto, roda um grid hierárquico em que o log de build domina e todo o resto lhe dá espaço.

Stripe é o grid de 12 colunas canônico na superfície de marketing e um grid modular no dashboard. Os cartões do dashboard se encaixam em larguras consistentes, os blocos de métricas compartilham alturas, e o produto inteiro se lê como uma composição só ao longo de mais de trinta telas. A análise do anti-dashboard cobre a filosofia que esse grid implementa.

Apple entrega grids hierárquicos nas páginas de produto, ritmo de linha de base em todo lugar e um grid modular na App Store e na Newsroom. A disciplina de grid da Apple é a coisa mais próxima na web da impressão da escola suíça, e a maioria das equipes de produto subestima quanto da impressão de marca vem só do grid.

Grids editoriais: NYT, Figma e Anthropic

O New York Times roda um grid modular na homepage, um grid hierárquico nas grandes matérias e um grid de manuscrito nas leituras longas. A mesma publicação usa três grids de propósito, alternando entre eles conforme a tarefa editorial. Essa é a lição: tipo de grid é uma decisão de design por superfície, não uma configuração global.

Figma roda um grid de colunas no navegador de arquivos, um grid modular na biblioteca do time e um grid customizado dentro do próprio canvas. O Notion entrega um grid de manuscrito para docs e um grid modular para bancos de dados. Loops e Resend, dois produtos mais novos, entregam grids de marketing de 12 colunas limpos e grids de colunas mais enxutos no app. O site da Anthropic roda um grid hierárquico em que uma única afirmação domina cada seção, modelado mais em layouts editoriais do que em UI de produto. O texto sobre onboarding sem onboarding mostra como a disciplina de grid chega aos fluxos de primeiro uso, que muitas vezes são tratados como layouts avulsos.

Quando quebrar o grid (de propósito)

Quebrar o grid só funciona quando o grid é tão visível que a quebra se lê como escolha deliberada. Sem um grid por trás da quebra, o elemento quebrado é só uma coisa desalinhada numa página.

A página de produto da Apple que deixa uma imagem hero passar da margem está quebrando um grid que se mantém firme em todo o resto. A matéria do NYT em que uma fotografia estoura para sangria total no meio do ensaio está quebrando um grid que roda módulos disciplinados acima e abaixo. A homepage da Anthropic de vez em quando deixa uma única citação fora do eixo, no dobro do tamanho esperado, e o movimento funciona porque tudo ao redor está abotoado.

A regra é uma quebra por superfície. Duas quebras se leem como ausência de grid. A quebra deve ser o momento mais lembrado da página. Se você não consegue apontar o grid que o elemento está quebrando, você não está quebrando um grid, está decorando um layout sem estrutura. O verbete do glossário sobre wireframe cobre a decisão inicial de qual grid você vai assumir.

A disciplina de painel de configurações em o problema da página de configurações é uma lição relacionada. Páginas de configurações costumam ser onde a disciplina de grid desmorona, porque cada configuração parece diferente o bastante para merecer um layout diferente. Não merece. Mantenha o grid, deixe o conteúdo variar dentro dele.

O grid é a marca, mesmo quando ninguém aponta para ele

Se você tirasse as cores, a tipografia e as imagens de qualquer produto citado neste artigo, os grids ainda seriam reconhecíveis. O grid do Linear ainda pareceria o Linear. O grid da Stripe ainda pareceria a Stripe. O grid é o artefato de marca mais profundo que um produto entrega, porque é aquele que o usuário sente sem nunca ver conscientemente.

Escolha um tipo de grid, escolha uma contagem de colunas, escolha uma unidade de linha de base. Mantenha-os em todas as superfícies por um ano e a marca vai começar a emergir da estrutura, não do tratamento de superfície. Esse é o segredo inteiro que a escola suíça ensinou e que a maioria das equipes de produto continua reaprendendo. O grid faz o trabalho. O resto é decoração que dá certo ou errado conforme o grid estava lá para sustentá-la.

FAQ

Qual a diferença entre um grid de colunas e um grid modular?

Um grid de colunas divide o canvas só em colunas verticais, então os blocos de layout ocupam uma ou mais colunas e o ritmo é horizontal. Um grid modular divide o canvas em células nas duas direções, colunas e linhas, então os blocos se encaixam em células e a densidade vira uma propriedade projetada. Grids de colunas dão conta de sites de marketing e da maioria dos shells de app. Grids modulares dão conta de dashboards, layouts editoriais e qualquer UI em que muitas unidades pequenas e comparáveis precisam ser lidas como um sistema.

Por que o grid de 12 colunas é o padrão?

12 é o menor número mais divisível. Ele se divide limpo em 1, 2, 3, 4, 6 e 12, o que cobre quase todo padrão de layout (largura total, metades, terços, quartos, sextos) sem frações. O Bootstrap o codificou em 2011, o Tailwind o entrega como padrão, e todo grande design system desde então seguiu a escolha porque a matemática é a matemática.

Ainda preciso de um framework CSS agora que o CSS Grid existe?

Para layout, não. display: grid com grid-template-columns: repeat(12, 1fr) e gap é um grid de 12 colunas em três linhas de CSS. Frameworks como Bootstrap e Tailwind agregam valor com convenções de componentes, atalhos utilitários e consistência em toda a equipe, mas a primitiva de layout em si agora é um recurso do navegador. Use o framework se ele acelera sua equipe. Não o use porque acha que precisa dele para grids.

FAQ: entregando e quebrando o grid

Como mantenho o ritmo de linha de base num produto real?

Escolha uma unidade base, geralmente 8 pixels. Faça de todo padding, margin, line-height e dimensão de componente um múltiplo dessa unidade. Texto de corpo em 16 pixels com line-height de 24 pixels.

Títulos em 32, 40, 48 ou 56 com line-heights em 40, 48, 56 ou 64. Espaçamento de seção em 96 ou 128. A disciplina é chata, o resultado é uma página que parece um produto acabado em vez de um rascunho.

Quando devo quebrar o grid?

Uma vez por superfície, quando o grid é tão visível que a quebra se lê como deliberada. A quebra deve ser o momento mais lembrado da página. Se você não consegue apontar o grid que o elemento está quebrando, a página ainda não tem um grid, tem um layout. Conserte o grid primeiro, quebre-o depois.

CTA

Se você quer uma equipe que projeta sistemas de grid como a espinha dorsal do produto, e não como um remendo de última hora antes do lançamento, contrate a Brainy. Entregamos produtos em que o grid faz o trabalho, a marca se lê num relance e o ritmo se sustenta em todas as superfícies. Müller-Brockmann aprovaria. Seus usuários também, mesmo sem saber qual grid estão olhando.