Design intrínseco: dimensionamento orientado pelo conteúdo

O design intrínseco, termo criado por Jen Simmons, significa deixar que o conteúdo determine seu próprio tamanho, em vez de impor dimensões explícitas em pixels. O CSS fornece palavras-chave de dimensionamento intrínseco que tornam as estruturas naturalmente responsivas, sem substituições orientadas por pontos de quebra.

min-content: o menor tamanho que acomoda o conteúdo sem excesso (quebra em cada limite de palavra para textos). max-content: o tamanho necessário para exibir o conteúdo em uma única linha, sem quebra. Ambos refletem as dimensões reais do conteúdo.

fit-content equivale a min(max-content, max(min-content, available)). Ele cresce conforme o conteúdo até o espaço disponível e depois quebra linhas. É perfeito para botões e rótulos que devem ter a mesma largura do texto, mas não ser mais largos que o contêiner.

minmax(min, max) em grid-template-columns define o tamanho mínimo e máximo de uma faixa. minmax(200px, 1fr) cria uma coluna de pelo menos 200px, mas que pode crescer. Combinado com auto-fill, cria grades intrinsecamente responsivas.

Ambos preenchem a linha com o maior número possível de faixas. auto-fill mantém faixas vazias (preservando a contagem de colunas). auto-fit recolhe faixas vazias para que as faixas preenchidas se expandam e ocupem o espaço. Use auto-fit para estruturas orientadas por conteúdo que devem se expandir e preencher a largura disponível.

clamp(min, preferred, max) mantém um valor entre limites. font-size: clamp(1rem, 2.5vw, 1.5rem) dimensiona o valor entre 1rem e 1.5rem com base na largura da área de visualização — tipografia fluida sem consultas de mídia.

grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)) cria uma grade responsiva que tem uma única coluna em áreas de visualização muito estreitas e adiciona colunas automaticamente conforme o espaço permite. Sem consultas de mídia e sem JavaScript.

aspect-ratio: 16/9 faz com que um elemento mantenha suas proporções conforme sua largura muda. Combinado com width: 100%, um contêiner de vídeo preenche seu elemento pai e sempre mantém a proporção 16:9, sem JavaScript nem truques de preenchimento baseados em porcentagem.

O design intrínseco combina com as propriedades lógicas do CSS (inline-size, block-size, margin-inline) para criar estruturas que funcionam nos modos de escrita horizontal e vertical. O dimensionamento intrínseco se adapta automaticamente à direção da escrita.

Fixa: width: 300px — sempre 300px, independentemente do conteúdo. Intrínseca: width: fit-content — tão larga quanto o conteúdo, até os limites impostos. Estruturas fixas exigem pontos de quebra para se ajustar; estruturas intrínsecas ajustam-se com base no próprio conteúdo e no contexto.

O design intrínseco é mais poderoso quando o conteúdo varia naturalmente de tamanho. Forçar o dimensionamento intrínseco quando o conteúdo é conhecido e uniforme adiciona complexidade sem trazer benefícios. Use tamanhos explícitos para elementos fixos da interface (navegação, barra de ferramentas); use dimensionamento intrínseco para áreas de conteúdo.

O que auto-fit faz de diferente de auto-fill em grid-template-columns?

O design intrínseco usa palavras-chave de dimensionamento do CSS (min-content, max-content, fit-content), minmax() com auto-fit, clamp() para dimensionamento fluido e aspect-ratio para criar estruturas orientadas pelas dimensões do conteúdo, em vez de pontos de quebra da área de visualização. O resultado são estruturas naturalmente responsivas, com menos CSS e menos consultas de mídia.