多列布局中点击区域被切开的根本原因是columns属性将内容按文本流自动分栏，导致可交互子元素被断开；解决方法是改用grid或flex布局，或对直接子元素设置break-inside: avoid。
多列布局里点击区域被切开，根本原因是用了 columns
你写 column-count: 3 或 columns: 15em，浏览器会把容器内文本流自动分栏，但所有子元素（比如 <a></a>、<button></button>、<div class="card">）默认按内容断行——只要高度不够一整列，就可能被劈成两半，一半在第一列、一半在第二列。这时点击区域就碎了：鼠标移到“下半截”时，实际触发的是另一列的空白区域，甚至点不到。
<h3>
<code>column-span: all 不解决可点击性问题
很多人试过给卡片加 column-span: all，结果发现没用。因为这个属性只对**直接子块级元素**生效，且仅用于让该元素横跨所有列显示（比如章节标题），它不会阻止内部文字或子元素被断开。更关键的是：column-span 本身不改变点击热区，只是视觉上“撑满”，底层 DOM 结构和事件绑定仍按原始流式布局走。
真正能保点击区域完整的方案只有两个
必须放弃 columns 系列属性，改用语义正确、事件边界清晰的布局方式：
- 要排卡片列表（如商品、文章摘要）→ 用
display: grid，配grid-template-columns: repeat(auto-fill, minmax(300px, 1fr))和gap - 要排简单横向项目（如导航链接、标签组）→ 用
display: flex+flex-wrap: wrap，每个项设flex: 1 1 280px或固定宽 - 如果非得用
columns（比如纯长文段落），那就只能把可交互元素全提成容器的直接子元素，并加break-inside: avoid——但 Safari 对这个支持不稳定，Chrome/Firefox 也只在块级元素上可靠
别踩这些兼容性坑
columns 在 Flex/Grid 容器里直接失效；overflow: hidden 会让第二列之后的内容不可见也不可点；IE 完全不支持 column-gap，老 Android WebView 也不认 break-inside。而 Grid 和 Flex 的点击区域天然连续，事件冒泡路径清晰，调试起来也直观——你点哪，就真点到了哪个 <div> 或 <code><a></a> 的边界内。
立即学习“前端免费学习笔记（深入）”；
