https://stackoverflow.com/questions/43686698/collapsing-borders-using-css-grid/43686894#43686894

应用场景

用css构造如下UI：

使用 grid-gap 和 box-shadow

.container {
  display: grid;
  grid-template-columns: 100px 100px;
  box-sizing: border-box;
  grid-gap:10px;
}
 
.block {
  width: 100px;
  height: 100px;
  background-color: lightgrey;
 box-shadow:0 0 0 10px palegreen;
}
.first {
  grid-column: 2 / span 1;
}

<div class='container'>
  <div class='block first'>1</div>
  <div class='block'>2</div>
  <div class='block'>3</div>
</div>

为什么不使用outline？

我以为这就是我的解决方案，直到我得知没有outline-top，outline-left等等:(