- 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
Ainda não há comentários.