Foundation 6：如何为grid-x响应式每行添加水平分隔线？

嘿，这个需求用纯CSS就能超简洁地搞定，完全不用改动你现有的HTML结构，适配Foundation的flex grid简直完美！

最简洁的实现方案（纯CSS，无额外HTML） #

核心思路是利用flex布局的换行特性，通过边框和负边距来只在换行的行之间显示分隔线，代码如下：

/* 给grid容器设置负边距，抵消第一行的顶部边框 */
.grid-x.row {
  margin-top: -1px;
  overflow: hidden; /* 隐藏第一行被顶上去的边框 */
}

/* 给每个tile添加顶部边框，并用margin-top让边框刚好显示在两行之间 */
.grid-x.row .column {
  border-top: 1px solid #ccc; /* 这里可以自定义分隔线的颜色、样式，比如改成虚线`dashed` */
  margin-top: 1px;
  /* 保留你原来的tile样式，比如padding、flex-basis这些 */
}

为什么这个方法管用？

• 第一行的tile顶部边框会被容器的负边距顶出可视区域，再通过overflow: hidden隐藏，所以第一行上方不会有多余的分隔线；
• 当tiles响应式换行时，新行的tile会因为margin-top往下偏移，它的顶部边框就刚好显示在上一行的下方，形成自然的行分隔；
• 不管屏幕尺寸怎么变、每行能放下多少个tiles，这个逻辑都会自动适配，完全不用写媒体查询。

如果想要更粗的分隔线，只需要把1px改成你想要的数值（比如2px），同时把margin-top和容器的margin-top对应调整成相同数值就行。

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