来了来了，Flex/Grid布局的间隙装饰线它来了
内容提要
本文介绍CSS间隙装饰线（column-rule/row-rule）在Flex和Grid布局中的新特性。该功能支持多属性值、repeat()语法、交叉中断控制、缩进扩展及显示范围控制，并支持动画。目前仅Chrome 149+支持，兼容性有限，但简化了分隔线实现，未来前景广阔。
延伸解读
历史与现状：从Columns到Flex/Grid
column-rule属性早在CSS多列布局（Columns）中就已存在，但实际项目中很少使用，因为Columns布局本身应用不广。如今该属性扩展至Flex和Grid布局，才真正发挥价值。这一变化反映了CSS新特性往往需要结合主流布局才能普及，也提醒开发者关注新属性在常见场景中的适用性。
多值与repeat()：简化复杂分隔线
新特性支持多值平铺和repeat()函数，可灵活控制每条分隔线的样式，避免重复代码。例如，row-rule: 2px dashed, dotted会循环应用样式，而repeat(2, 1px), 4px则按周期重复。这大大提升了分隔线的可定制性，尤其适合动态或大量分隔线的场景。
交叉控制与缩进：精细布局的关键
rule-break: intersection可让纵横分隔线交叉处留白，避免视觉冲突；rule-inset-cap和rule-inset-junction则分别控制端点与交叉点的缩进，支持负值实现扩展。这些属性让分隔线不再生硬，能适应复杂网格布局，但需注意不同属性值的组合效果。
兼容性限制：谨慎使用
目前该特性仅Chrome 149+支持，其他浏览器尚未跟进，因此生产环境使用需谨慎。建议开发者先了解其语法和效果，待兼容性改善后再广泛应用。同时，可关注后续浏览器更新，以便及时采用这一简化分隔线实现的新方案。
Q&A
CSS的column-rule属性以前为什么很少用？
因为column-rule属性只能在Columns布局中生效，而Columns布局在实际项目中很少使用，所以该属性名存实亡。
Flex/Grid布局中如何实现间隙装饰线？
在Flex或Grid布局中，通过设置gap间隙，并使用column-rule和row-rule属性（及其子属性）来定义装饰线的样式、宽度和颜色。例如：gap: 1px; column-rule-width: 2px; column-rule-style: dashed; column-rule-color: #d4d0c8;
间隙装饰线支持多属性值和repeat()语法吗？
支持。column-rule和row-rule属性可以设置多个值，按平铺规则循环匹配；同时支持repeat()函数简化重复值，例如row-rule-width: repeat(2, 1px), 4px;
如何控制纵横分隔线交叉时的显示？
使用rule-break属性，设置rule-break: intersection可以让交叉处互相留白，避免线条相交。
间隙装饰线如何设置缩进或扩展？
使用rule-inset属性控制缩进，支持对称缩进；若需不对称，可用rule-inset-cap（端点）和rule-inset-junction（交叉点）分别设置，也支持负值实现扩展。
如何控制间隙装饰线只在有内容的间距显示？
使用rule-visibility-items属性，设置around或between值，可以控制装饰线仅在存在相邻项的间距显示，避免空间距出现多余线条。
间隙装饰线支持动画吗？兼容性如何？
支持动画，宽度、颜色和交叉缩进均可过渡。但兼容性有限，目前仅Chrome 149+支持。
