Display: Contents

O display: contents é um valor da propriedade display que faz um elemento "desaparecer" da árvore de renderização, mantendo seus filhos no lugar. Ou seja, a caixa do elemento em si não é exibida, mas o conteúdo dela continua lá, como se os filhos fossem promovidos diretamente ao elemento pai.

Como funciona?

Normalmente, todo elemento HTML gera uma caixa (box) que participa do layout. Com display: contents, essa caixa é removida — sem margin, padding, border ou background — mas os elementos filhos continuam sendo renderizados normalmente, como se estivessem um nível acima na árvore.

Exemplo básico

Veja um caso comum: um wrapper que atrapalha um layout de Grid ou Flexbox.

<div class="grid">
    <div class="wrapper">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
    </div>
    <div class="item">Item 3</div>
</div>

Sem o display: contents, o .wrapper criaria uma célula própria no grid, quebrando o alinhamento dos itens. Aplicando a propriedade nele, o wrapper "some" e os itens 1 e 2 passam a se comportar como filhos diretos do .grid:

.wrapper {
    display: contents;
}

Quando usar

Remover um elemento de agrupamento (wrapper) que só existe por questões semânticas ou de organização do HTML, sem afetar o layout de Grid/Flexbox.
Evitar aninhamentos desnecessários de containers só para estilização.
Simplificar a estrutura visual sem alterar a estrutura semântica do documento.

Cuidado com a acessibilidade

Um dos principais problemas do display: contents é que, em diversos navegadores, ele remove o elemento também da árvore de acessibilidade, fazendo com que leitores de tela ignorem informações importantes (como o texto de um <button> ou <a>). Por isso, evite usá-lo em elementos interativos ou que carreguem semântica relevante, a menos que teste bem com tecnologias assistivas.

O que se perde ao usar

Estilos de caixa: background, border, margin e padding deixam de ter efeito, pois a caixa não existe mais.
Propriedades de layout: width, height, position e outras relacionadas à caixa também são ignoradas.
Semântica em alguns navegadores: como citado acima, pode afetar a árvore de acessibilidade.

Compatibilidade

O suporte é bom nos navegadores modernos (Chrome, Firefox, Edge, Safari), mas vale sempre checar o caniuse antes de usar em produção, principalmente se o projeto precisar suportar navegadores mais antigos.

Conclusão

O display: contents é uma ferramenta poderosa para "achatar" a árvore de renderização sem mexer na estrutura HTML, muito útil em layouts com Grid e Flexbox. Só fique atento aos efeitos colaterais em acessibilidade antes de aplicá-lo em elementos interativos.