The Gap Strikes Back: CSS Gap agora pode ser estilizado

• Antes, era possível criar espaçamento com a propriedade CSS gap, mas estilizar a própria área do gap era impossível, então era preciso recorrer a vários truques (elementos extras, border, pseudo-elementos etc.)
• O novo recurso de CSS gap decorations permite desenhar linhas (separadores) diretamente entre os itens do layout com propriedades como row-rule, column-rule etc.
• A decoração pode ser aplicada em todos os principais layouts, como Grid, Flexbox, Multi-column e em breve Masonry, permitindo melhorias estruturais e visuais apenas com CSS puro, sem marcação extra nem elementos desnecessários
• Há suporte para repetição/combinação de vários estilos (espessura, cor, padrão etc.), com controle preciso por meio de repeat(), outset, paint-order e mais
• No momento, o recurso só pode ser usado com flag ativada em navegadores baseados em Chromium (Chrome/Edge 139+), enquanto segue em padronização e expansão

---

Limitações antigas do gap e a mudança

• Antes era difícil estilizar a área do gap, e era necessário adicionar bordas de separação ou pseudo-elementos artificiais
• Essa abordagem trazia vários problemas, como impacto no tamanho do layout, acessibilidade e complexidade da marcação
• Agora surgiu o padrão gap decorations, que permite aplicar decorações (como linhas) na área de espaçamento com propriedades CSS simples

Introdução ao CSS gap decorations

• column-rule: já era usado em multi-column para desenhar divisórias verticais (ex.: column-rule: 1px solid black;)
• Agora essa propriedade também pode ser usada em flexbox e grid

  .my-grid-container {  
    display: grid;  
    gap: 2px;  
    column-rule: 2px solid pink;  
  }  
  

• row-rule: permite desenhar separadores entre as linhas (na horizontal)

  .my-flex-container {  
    display: flex;  
    gap: 10px;  
    row-rule: 10px dotted limegreen;  
    column-rule: 5px dashed coral;  
  }  
  

• Repetição/combinação de vários estilos: é possível misturar diferentes estilos com repeat() ou separação por vírgulas

  .my-container {  
    display: grid;  
    gap: 2px;  
    row-rule:  
      repeat(2, 1px dashed red),  
      2px solid black,  
      repeat(auto, 1px dotted green);  
  }  
  

• Propriedades de controle fino: row-rule-break, column-rule-break, row-rule-outset, column-rule-outset, gap-rule-paint-order etc. permitem ajustar com detalhe posição, interseções, ordem de sobreposição e mais

Exemplo: uso prático de gap decorations

• A página de exemplo define o body como grid e separa header/nav/main/footer com gap
• Com row-rule, é possível aplicar divisórias com espessuras, cores e estilos diferentes
• O menu nav usa flexbox e column-rule para desenhar linhas entre os itens
• A área main usa flexbox para organizar imagem e texto em formato masonry, com row-rule e column-rule destacando a estrutura em estilo de grade
• Com column-rule-outset: 0; e afins, dá para ajustar com precisão o ponto inicial e final das linhas

Suporte nos navegadores e ativação

• Atualmente, é necessário ativar uma flag (about://flags → Experimental Web Platform Features) em navegadores baseados em Chromium, como Chrome/Edge 139+
• A padronização oficial ainda está em andamento, e feedbacks e experimentos são bem-vindos

Saiba mais e Playground

• Rascunho do padrão CSS Gap Decorations Module Level 1
• Explainer do Microsoft Edge
• No Playground interativo, é possível testar visualmente várias combinações de decoração
• Questões sobre recurso, compatibilidade e feedback podem ser enviadas no Chromium issue tracker