{
  "id": 17368795,
  "title": "CSS gap decorations: lines between grid items",
  "url": "https://urgent.news/2026/10/31/css-gap-decorations-lines-between-grid-items",
  "topic": "tech",
  "section": "Tech",
  "published": "2026-10-31T08:30:41.000Z",
  "source": {
    "name": "Dev.to",
    "slug": "dev-to",
    "url": "https://dev.to/richicodes/css-gap-decorations-lines-between-grid-items-3pp1"
  },
  "original_language": "en",
  "account": "This note describes the new CSS properties, row-rule and column-rule, which allow for decorative separators between grid items or flex container children. These properties offer a cleaner solution compared to previous hacks involving borders or backgrounds. Row-rule and column-rule are shorthand properties for -width, -style, and -color, similar to the border shorthand. By default, they are set to medium, none, and currentcolor, meaning they are not visible unless explicitly defined. The property takes a list of values, each applied to a gap in order. When there are more gaps than values, the list repeats, cycling through the styles. They do not affect the spacing of items, and their width can exceed the gap size, causing the adjacent items to overlap. The lines are painted above the container's border and scroll with the items in a scroll container. The demo uses a four-column, four-row grid with nine tiles, demonstrating three declarations: row-rule and column-rule set the styles for the rows and columns, respectively. The rules can be broken at intersections or extended to include empty cells, controlled by rule-break and rule-visibility-items properties. The lines can also be inset from the junctions using rule-inset, with positive values pulling them inward or percentages relative to the gap size. The fallback for browsers that do not support these properties is to paint the container with the line color and clip it to the content-box. The lines do not create extra space in the layout and should be used as a progressive enhancement rather than a primary layout solution. Currently, Chrome and Edge 149 are the only browsers supporting these features, with Firefox and Safari marking them as experimental. The spec is still evolving, and support may change in the future.",
  "summary": "This note has an interactive demo. Try it in the original Drawing a line between grid cells has always been a hack: borders on half the items, :nth-child() rules to remove the extra ones, or a coloured background peeking through the gaps. Since Chrome and Edge 149 there's a real property for it: row-rule and column-rule now work on grid and flex containers, not just on multi-column text. I like…",
  "key_points": [],
  "editors_take": null,
  "illustration": null,
  "coverage": {
    "outlets": 1,
    "also_reported_by": []
  },
  "ai_generated": true,
  "disclaimer": "Summaries, key points and the editor’s take are written by software from other outlets’ reporting and may contain errors — always check the linked original."
}