如何在响应式CSS Grid布局中为列之间添加分隔边框

你之前给固定类加边框的方式无法适配动态列数，因为类的数量不会跟随屏幕尺寸变化、自动匹配列的位置，以下是两种可完美适配任意自适应列数的实现方案：

方案1：容器背景+列间隙模拟（推荐） #

这是兼容性最好、实现最简单的方案，完全不需要关心列数变化，代码修改如下：

.flex-container {
  display: grid;
  text-align: center;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  width:85%;
  /* 新增以下两行配置 */
  background-color: #000; /* 分隔线颜色，可自行修改 */
  column-gap: 1px; /* 分隔线宽度，可自行修改 */
}
/* 给所有子项设置背景色，覆盖容器背景，仅露出间隙作为分隔线 */
.flex-container > * {
  background-color: #fff; /* 替换为你实际需要的子项背景色即可 */
}

注：你原代码里的light-blue是无效颜色值，正确的浅蓝写法为lightblue。

方案2：子项边框+选择器控制 #

如果不方便修改容器和子项的背景色，可以用CSS选择器实现，但仅适用于列数可预期的场景：

/* 给所有子项统一加左边框 */
.flex-container > div {
  border-left: 1px solid #000;
}
/* 去掉每行第一个子项的左边框，避免最左侧出现多余边框 */
.flex-container > div:nth-child(1n + 1) {
  border-left: none;
}

如果列数完全动态无规律，优先使用方案1，不会出现任何适配问题。

内容的提问来源于stack exchange，提问作者Stacie T.