防止CSS网格中出现双重边框

Question

给定当前的CSS网格示例，如何折叠边框以避免出现双边框？

这是使用Html表实现的如此简单的事情。如何使用display: grid？

.wrapper {

  display: grid;

  grid-template-columns: 50px 50px 50px 50px;

}



.wrapper > div {

  padding: 15px;

  text-align: center;

  border: 1px solid black;

}


<div class="wrapper">

  <div>1</div>

  <div>2</div>

  <div>3</div>

  <div>4</div>

  <div>5</div>

  <div>6</div>

  <div>7</div>

  <div>8</div>

</div>

Answer 1

您可能会这样：

.wrapper {

  display: inline-grid;

  grid-template-columns: 50px 50px 50px 50px;

  border-bottom: 1px solid black;

  border-left: 1px solid black;

}



.wrapper > div {

  padding: 15px;

  text-align: center;

  border-top: 1px solid black;

  border-right: 1px solid black;

}



body {

 background:pink;

}


<div class="wrapper">

  <div>1</div>

  <div>2</div>

  <div>3</div>

  <div>4</div>

  <div>5</div>

  <div>6</div>

  <div>7</div>

  <div>8</div>

</div>

另一个想法是依靠渐变来填补空白，如下所示：

.wrapper {

  display: inline-grid;

  grid-template-columns: 50px 50px 50px 50px;

  grid-gap:1px;

  background:

    linear-gradient(#000,#000) center/100% 1px no-repeat,

    repeating-linear-gradient(to right,

        transparent ,transparent 50px,

        #000 50px,#000 51px);

  border:1px solid;

}



.wrapper > div {

  padding: 15px;

  text-align: center;

}



body {

 background:pink;

}


<div class="wrapper">

  <div>1</div>

  <div>2</div>

  <div>3</div>

  <div>4</div>

  <div>5</div>

  <div>6</div>

  <div>7</div>

  <div>8</div>

</div>

您还可以调整初始解决方案以使其更加灵活，并且可以在一行中处理任意数量的项目。

在整个页面上运行以下代码并调整窗口大小：

.wrapper {

  display: grid;

  max-width:800px;

  grid-template-columns: repeat(auto-fill,minmax(100px,1fr));

  border-top: 1px solid black;

  border-left: 1px solid black;

}



.wrapper > div {

  padding: 15px;

  text-align: center;

  border-bottom: 1px solid black;

  border-right: 1px solid black;

}



body {

 background:pink;

}


<div class="wrapper">

  <div>1</div>

  <div>2</div>

  <div>3</div>

  <div>4</div>

  <div>5</div>

  <div>6</div>

  <div>7</div>

  <div>8</div>

  <div>9</div>

  <div>10</div>

  <div>11</div>

</div>