Html 如何为可堆叠列提供资源中心对齐方式

我想要一个具有x列的响应式布局，在

lg

屏幕大小上每行显示3列，

对齐
之间的内容。当屏幕小于
lg
时，所有x列应堆叠在彼此下方，并且应对齐
justify content center

我试图做到这一点，但要记住一件重要的事情：列周围的列div应该完全相同，因此我可以轻松地将列7切换到列3，而无需将某些内容更改为单个列div

以下是我目前掌握的情况：

<div class="d-flex justify-content-between">
    <div class="col-lg">
        <div style="width: 288px;" class="justify-content-center bg-primary">col 1</div>
    </div>
    <div class="col-lg">
        <div style="width: 288px;" class="justify-content-center bg-secondary">col 2</div>
    </div>
    <div class="col-lg">
        <div style="width: 288px;" class="justify-content-center bg-warning">col 3</div>
    </div>
    <div class="col-lg">
        <div style="width: 288px;" class="justify-content-center bg-primary">col 4</div>
    </div>
    <div class="col-lg">
        <div style="width: 288px;" class="justify-content-center bg-secondary">col 5</div>
    </div>
    <div class="col-lg">
        <div style="width: 288px;" class="justify-content-center bg-warning">col 6</div>
    </div>
</div>


第1列
第2列
第3列
第4列
第5列
第6栏


如你所见，我有两个主要问题：


将列包装在
.col
中会中断
之间的内容对齐
第4列、第5列和第6列应自动转到下一行

非常感谢您的帮助
 好吧，如果CSS网格是一个选项，这就是我想到的；定义网格属性非常简单，因此每行上只有3列，间隔在3列之间，并且它们使用简单的媒体查询堆叠在彼此的顶部，我从引导中将其设置为大的断点的宽度

让我知道这是否是你需要的


.grid{
显示：网格；
网格模板列：重复（3288px）；
网格自动行：最小最大值（100px，自动）；
调整内容：之间的间距
}
.表格项目{
边框：1px纯黑；
}
@介质（最大宽度：992px）{
.电网{
网格模板列：288px；
证明内容：中心；
}
}

1.
2.
3.
4.
5.
6.
您需要使用引导吗？CSS网格不是一个选项吗？我已经在那个页面上使用它了，所以它已经被加载了，但是我想一个没有引导功能的解决方案也会起作用，如果没有引导功能的话。就像魅力一样！谢谢