网格项目定位

Question

我需要帮助确定两行中5个项目的网格位置[第一行3个，第二行2个]。我需要第二排居中，这样它看起来或多或少像

[x] 。。[x] 。。[x]

[x] 。。[x] 。。。

到目前为止，我的工作是：我的HTML/CSS布局

然而，我的目标是将第二排居中，如：我的参考，我想遵循

.month-teas-container {
display: inline-block;
width: 1000px;
justify-content: center;
margin: 100px;
}
.month-teas-contentez {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
column-gap: 50px;
}
.content img {
width: 300px;
height: 200px;
}

<div class="month-teas-container">
<div class="month-texts">
<h2>Tea of the Month</h2>
<h4>What's Stepping at The Tea Cozy?</h4>
</div>
<div class="month-teas-contentez">
<div class="content">
<img src="resourcesberryblitz.jpg" alt="Fall Berry Blitz Tea">
<h4>Fall Berry Blitz Tea</h4>
</div>
<div class="content">
<img src="resourcesspicedRum.jpg" alt="Spiced Rum Tea">
<h4>Spiced Rum Tea</h4>
</div>
<div class="content">
<img src="resourcesdonut.jpg" alt="Seasonal Donuts">
<h4>Seasonal Donuts</h4>
</div>
<div class="content">
<img src="resourcesmyrtle.jpg" alt="Myrtle Ave Tea">
<h4>Myrtle Ave Tea</h4>
</div>
<div class="content">
<img src="resourcesbedford.webp" alt="Bedford Bizzare Tea">
<h4>Bedford Bizzare Tea</h4>
</div>
</div>
</div>

考虑到我想使用网格，你们能提供什么变通方法/解决方案吗？

Answer 1

使用6列网格而不是3列网格，然后偏移第4项。

.wrap {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: .5em;
padding: .5em;
}
.item {
height: 100px;
border: 1px solid grey;
grid-column: span 2;
}
.item:nth-child(4) {
grid-column: 2 / span 2;
}

<div class="wrap">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>