如何阻止WebKit中CSS列在网格行内换行？

• 核心问题：Safari 对columns与CSS Grid组合布局的break-inside支持存在兼容性缺陷，直接给表单元素设置断行禁止样式无效——因为未针对整行的网格容器做拆分控制。
• 可行解决思路：
  1. 针对整行容器设置断行禁止（推荐）
     给包含单个标签+输入框的行级网格容器添加以下样式，确保整行不会被跨列拆分：

     .form-row {
       display: grid;
       grid-template-columns: 1fr 2fr;
       gap: 1rem;
       /* Safari 兼容核心样式 */
       break-inside: avoid;
       -webkit-column-break-inside: avoid;
       page-break-inside: avoid;
       /* 强制块级上下文，辅助Safari识别断行规则 */
       width: 100%;
     }
     

  2. 替换columns为Grid实现响应式布局（更稳妥）
     放弃columns:2，改用Grid的自动适配特性实现双列/单列切换，从根源规避多列布局的兼容性问题：

     .outer-container {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
       gap: 1rem;
     }
     

     这种方式在Chrome和Safari中表现完全一致，视口充足时分双列，缩小时自动转为单列，无需额外控制断行。
• 补充提示：如果坚持使用columns布局，可尝试给行容器添加overflow: hidden或display: inline-block，强制创建独立布局上下文，辅助break-inside规则生效。

内容的提问来源于stack exchange，提问作者Jérôme Tremblay