如何为行列数量动态变化的CSS Grid设置边框样式？

针对动态行列的Grid布局，要实现仅单元格间显示分隔线、布局边缘无框的效果，最简洁且适配性强的方法是利用Grid的gap结合容器背景色来模拟分隔线，完全不需要依赖固定行列数，完美适配响应式需求。

实现代码 #

容器样式 #

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(auto, 312px));
  gap: 1px; /* 控制分隔线的宽度 */
  background-color: #999; /* 分隔线的颜色 */
}

单元格样式 #

.element {
  background-color: #fff; /* 与页面背景色一致，覆盖容器背景 */
  padding: 1.5rem; /* 根据实际需求调整内边距 */
}

原理说明 #

1. gap: 1px 为单元格之间设置固定宽度的间距，这个间距就是分隔线的宽度。
2. 容器的背景色会填充这些间距区域，形成单元格之间的横竖分隔线。
3. 每个单元格设置与页面背景一致的背景色，覆盖自身区域的容器背景，这样布局的边缘就不会显示边框，仅单元格之间的间距区域呈现分隔线效果。

备选方案（需边框样式差异化时） #

如果需要横向和纵向分隔线颜色不同，可以结合伪元素实现：

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(auto, 312px));
  gap: 1px;
}

.element {
  position: relative;
  background-color: #fff;
  padding: 1.5rem;
}

/* 纵向分隔线（右侧） */
.element:not(:last-child, :nth-last-child(-n + var(--column-count)))::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background-color: #999;
}

/* 横向分隔线（下侧） */
.element:not(:nth-last-child(-n + var(--column-count)))::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  height: 1px;
  background-color: #666;
}

注：该方案需要通过JavaScript动态计算当前列数，赋值给--column-count CSS变量，代码示例：

const container = document.querySelector('.grid-container');
const updateColumnCount = () => {
  const columnCount = getComputedStyle(container).gridTemplateColumns.split(' ').length;
  container.style.setProperty('--column-count', columnCount);
};
// 初始化和窗口 resize 时更新
updateColumnCount();
window.addEventListener('resize', updateColumnCount);

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