我使用ReactJS迭代数组，并为数组中的每个对象生成一个引导卡，但这些卡从屏幕的最左边开始，从左到右填充，直到它们达到5，然后创建一个新行。
我想看看是否有办法制作第一张卡片，如果只有一张，从屏幕的中心开始，然后随着更多的卡片被添加而向外填充。
有可能吗？

<div className='row mt-lg-3 row-cols-xs-1 row-cols-sm-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-5 g-4'>
    {viewElements.map((element) => (
          <ElementItem key={element._id} element={element} />
    ))}
</div>

这是目前有5张卡片时的外观，它将从下一行开始。我喜欢这样的外观，但当少于5张时，我希望它们从页面的中心开始填充，而不是像第二张照片所示的从左到右。