使用Foundation 6 for Sites实现可打印的类报纸双栏布局

问题根因 #

Foundation的默认打印样式会强制给所有栅格元素添加width: 100% !important规则，覆盖了你设置的columns属性的宽度约束，同时部分打印引擎对像素单位的列宽适配存在偏差，最终导致内容溢出。

分步修复步骤 #

• 第一步：覆盖Foundation默认打印样式冲突项
  在你的自定义CSS末尾添加打印媒体查询，重置Foundation栅格的强制样式：

@media print {
  /* 重置Foundation所有栅格相关元素的打印强制规则 */
  .grid-container, .grid-x, [class*="cell"], .column, .columns {
    width: auto !important;
    max-width: none !important;
    float: none !important;
    flex: unset !important;
    padding: 0 !important;
  }
}

• 第二步：给双栏容器添加打印专属适配规则
  给承载报纸内容的容器设置同时适配屏幕和打印的columns规则，打印场景优先使用物理单位（cm/pt），避免像素适配问题：

/* 屏幕端双栏样式 */
.newspaper-wrap {
  columns: 2 320px;
  column-gap: 2rem;
  column-rule: 1px solid #eee;
}

@media print {
  .newspaper-wrap {
    columns: 2 17cm; /* A4纸扣除边距后单栏宽度适配 */
    column-gap: 1cm;
    column-rule: 1px solid #ccc;
    height: auto !important;
    overflow: visible !important;
  }

  /* 避免内容块在栏中间、分页中间被截断 */
  .newspaper-wrap p, .newspaper-wrap h3, .newspaper-wrap div, .newspaper-wrap img {
    break-inside: avoid;
    widows: 2; /* 单行不单独留在栏尾 */
    orphans: 2; /* 单行不单独出现在栏头 */
  }
}

• 第三步：配置全局打印页面规则
  添加@page规则固定打印纸张尺寸和边距，避免不同浏览器默认打印设置导致的布局偏移：

@page {
  size: A4 portrait; /* 按需调整为A3/横向等规格 */
  margin: 2cm 1.5cm;
}

注意事项 #

• 不要给双栏容器及其父元素设置overflow: hidden或者固定高度，否则打印时溢出内容会被直接隐藏，无法自动流入下一栏/下一页
• 如果使用Foundation的旧版浮动栅格而非XY Grid，只需对应调整第一步的重置类名即可
• 优先使用Chromium内核浏览器（Chrome/Edge）做打印测试，该类浏览器对CSS打印columns的支持度最高

内容的提问来源于stack exchange，提问作者Allison