您可能会这样：
.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>
您还可以调整初始@R_301_2422@案以使其更加灵活，并且可以在一行中处理任意数量的项目。
.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>
602392714
清零编程群