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

您可能会这样：

.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 >  <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 >  <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 >  <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>