Gap decorations (column-rule / row-rule in grid and flex)

Chrome 149 (junho de 2026). Não é Baseline.

Chrome 149Edge 149Safari noFirefox no

Desenha filetes dentro dos gaps de grid/flex com `column-rule` e `row-rule` (mais `*-rule-inset` e `-outset`), então linhas divisórias entre cards não precisam de bordas nem pseudo-elementos.

CSS

.fx-058 {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 16px;
  list-style: none;
  padding: 0;
  font-family: system-ui;
    column-rule: 1px solid #ddd;
  row-rule: 1px solid #ddd;
  column-rule-inset: 4px
}
.fx-058 li {
  padding: 16px;
  text-align: center
}

HTML

<ul class="fx-058"><li>A</li><li>B</li><li>C</li><li>D</li><li>E</li><li>F</li></ul>

Fallback: Os outros navegadores mostram o grid sem linhas; adicione regras de `border` sob `@supports not (row-rule: 1px solid red)` se os divisores forem obrigatórios.

Fonte: developer.chrome.com/release-notes/149

Prompt

Desenhe divisores entre itens de grid ou flex com `column-rule` e `row-rule` no container (Chrome 149+), não com bordas nos itens. Se os divisores forem essenciais em todos os navegadores, adicione um bloco `@supports not (row-rule: 1px solid red)` com bordas por item.