Flex/Grid布局：换行居中且子元素宽度适配内容的问题求助

我有一个id为#ct的div容器，内部包含5个类名为.content的子div。希望实现第一行3个、第二行2个且整体居中的布局：

• 使用Flex布局时，用flex-basis会导致子元素宽度超出实际内容宽度，代码如下：

Flex布局问题代码 #

#ct {
   display: flex;
   flex-wrap: wrap;
   gap: 9px 30px;
   justify-content: center;
}

.content {
   flex-basis: 28%;
}

.content {
   background-color: green;
}

<div id="ct">
   <div class="content"><p>Content</p></div>
   <div class="content"><p>Content</p></div>
   <div class="content"><p>Content</p></div>
   <div class="content"><p>Content</p></div>
   <div class="content"><p>Content</p></div>
</div>

• 尝试用Grid布局解决了宽度问题，但无法让第二行的2个元素居中，代码如下：

Grid布局尝试代码 #

#ct {
   display: grid;
   grid-template-columns: repeat(3, auto);
   gap: 9px 30px;
   justify-content: center;
}

.content {
   flex-basis: 28%;
}

.content {
   background-color: green;
}

<div id="ct">
   <div class="content"><p>Content</p></div>
   <div class="content"><p>Content</p></div>
   <div class="content"><p>Content</p></div>
   <div class="content"><p>Content</p></div>
   <div class="content"><p>Content</p></div>
</div>

期望效果 #

综上，Flex方案会强制子元素拉伸，Grid方案无法让第二行元素居中，请问如何解决该问题？

方案一：优化Flex布局 #

给.content添加flex-shrink: 0和width: fit-content，既保留内容宽度，又能让布局按需求换行并居中：

#ct {
   display: flex;
   flex-wrap: wrap;
   gap: 9px 30px;
   justify-content: center;
}

.content {
   flex-shrink: 0; /* 禁止子元素收缩 */
   width: fit-content; /* 宽度适配内容 */
   background-color: green;
}

方案二：优化Grid布局 #

改用grid-template-columns配合max-content，同时给容器设置适配内容的宽度并居中，就能实现需求：

#ct {
   display: grid;
   grid-template-columns: repeat(3, max-content);
   gap: 9px 30px;
   width: fit-content;
   margin: 0 auto;
}

.content {
   background-color: green;
}

两种方案都能实现目标：子元素宽度适配内容，第一行3个、第二行2个且整体居中。

内容的提问来源于stack exchange，提问作者user22265606