如何将CSS网格的一个单元格设置为不同的颜色

Question

我想制作一个 CSS 网格，其中的单元格具有折叠的浅灰色边框，但焦点所在的单元格具有蓝色边框。这是一个例子： https://stackblitz.com/edit/stackblitz-starters-pdrtgu?file=index.html

我尝试使用

outline

和

grid-gap

，但就是无法完全正确。整个蓝色边框不显示，或者单元格边框不折叠。使用

box-shadow

代替

outline

也没有帮助。

这里有解决办法吗？谢谢。

[请注意，有人试图通过声称另一个问题类似来结束我的问题。然而，另一个问题是关于

<table>

细胞的。我的问题是关于 css 网格，它的工作方式不同。]

Answer 1

我不完全确定您对“折叠”灰色边框的意图是什么，但是您是否尝试过使用带有选定类的边框颜色来覆盖此默认灰色？

<style>
  body {
    margin: 25px;
    background-color: #ddd;
  }
  .grid {
    display: grid;
    grid-template-columns: 10rem 10rem auto;
    grid-gap: 1px;
    width: 100%;
  }
  .cell {
    border: 1px solid #ccc;
    padding: 5px;
  }
  .col-1 {
    grid-column: 1;
  }
  .col-2 {
    grid-column: 2;
  }
  .col-3 {
    grid-column: 3;
  }
  .selected {
    border-color: blue;
  }
</style>