如何使最后一个网格项居中但保持宽度

Question

我有4个网格项，我想将最后一个项居中放在第二行，但保持其当前宽度：

.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
.item4 {
grid-column: 2/span 3;
}

<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>  
<div class="item4">4</div>
</div>

我试过：

.item4 {
grid-column: 2;
}

然而，这让我的项目4减少到与其他项目相同的宽度，而我希望它更大(当跨度到第三列时的当前宽度(

不确定是否有办法占据第二行第一列的一半和第三列的一半。

感谢提供的任何帮助

Answer 1

我可能无法对您正在寻找的解决方案给出明确的答案，但下面的解决方案可能就是您问题的答案。它可以是一个解决方案，使列线宽度与网格列，并给予它一定的宽度。

.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
.item4 {
grid-column: 1/-1;
width: 500px;
margin: auto;
}

<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>  
<div class="item4">4</div>
</div>