如何为CSS Grid单个单元格设置差异化样式（蓝色边框）

问题描述 #

需要实现一个CSS Grid布局：

• 单元格带有合并的浅灰色边框
• 选中状态的单个单元格显示完整的蓝色边框

尝试过border、outline、grid-gap及box-shadow等属性，但始终无法兼顾两种效果：要么蓝色边框被遮挡，要么单元格边框无法合并。

解决方案 #

核心思路是利用grid-gap结合网格容器的背景色实现合并边框，再通过outline（配合outline-offset）实现选中状态的蓝色边框，既不影响布局，也能保证边框完整显示。

修改后的代码示例 #

CSS 代码

body {
  margin: 25px;
  background-color: #ddd;
}
.grid {
  display: grid;
  grid-template-columns: 10rem 10rem auto;
  grid-gap: 1px; /* 间隙作为合并边框的宽度 */
  background-color: #ccc; /* 间隙颜色即浅灰边框色 */
  width: 100%;
}
.cell {
  background-color: #fff; /* 单元格背景，覆盖容器背景，露出间隙边框 */
  padding: 5px;
}
/* 选中状态样式 */
.selected {
  outline: 2px solid blue; /* 蓝色边框宽度 */
  outline-offset: -2px; /* 向内偏移，刚好覆盖原灰色边框位置 */
}
/* 保留原列定位类（可选，若网格自动排列可省略） */
.col-1 {
  grid-column: 1;
}
.col-2 {
  grid-column: 2;
}
.col-3 {
  grid-column: 3;
}

HTML 代码

<h4>Grid</h4>
<div class="grid">
  <div class="header cell col-1">Header Col 1</div>
  <div class="header cell col-2">Header Col 2</div>
  <div class="header cell col-3">Header Col 3</div>
  <div class="data cell col-1">Row 1 Col 1</div>
  <div class="data cell col-2">Row 1 Col 2</div>
  <div class="data cell col-3">Row 1 Col 3</div>
  <div class="data cell col-1">Row 2 Col 1</div>
  <div class="data cell col-2 selected">Row 2 Col 2</div>
  <div class="data cell col-3">Row 2 Col 3</div>
  <div class="data cell col-1">Row 3 Col 1</div>
  <div class="data cell col-2">Row 3 Col 2</div>
  <div class="data cell col-3">Row 3 Col 3</div>
</div>

关键原理说明 #

1. 合并边框实现：网格容器设置grid-gap:1px和background-color:#ccc，单元格设置background-color:#fff，这样单元格之间的间隙就会显示为浅灰色边框，视觉上是合并的效果，避免了传统边框叠加导致的粗线问题。
2. 选中状态边框：使用outline而非border，因为outline不占用布局空间，不会导致单元格移位；通过outline-offset:-2px让蓝色边框向内偏移，刚好覆盖原灰色边框的位置，保证蓝色边框完整显示且不会与其他单元格边框冲突。

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