我正在尝试让元素逐行填充容器（不是砖石），扩展到完全填充行并均匀间隔，每行最多三个元素。（我认为这一定在前面的问题中已经涵盖，但我还没有找到我要找的内容。）
这个代码片段显示了我想要的结果，有一个元素、两个元素、三个元素等等（在这个例子中使用了grid，但是我不在乎它是grid、flex还是其他什么），但是它非常难看，需要我为每个变量（columns-1、columns-2等等）都有CSS类，并且需要我在容器中为它的内容指定正确的类：
第一个
因此：

• 对于一个、两个或三个元素，将它们放在一行中，以均匀地填充可用空间
• 对于四个元素，每行放置两个元素，四个元素大小相等
• 对于五个元素，在第一行中均匀放置三个，在第二行中放置两个
• 对于六个元素，每行三个，大小相等

理想情况下，使用除实际项之外的不变标记，因此对于一个元素：

<div class="container">
    <span>Some Item</span>
</div>

对于三个：

<div class="container">
    <span>Some Item</span>
    <span>Some Other Item</span>
    <span>Another Item</span>
</div>

和/或其他信息。
在理想情况下，每行的元素数将根据其内容动态确定（类似于fit-content），而不是我给出的任意数字（3），但在我的特定用例中，如果必须选择任意数字，我可以。
我试图用CSS而不是JavaScript来解决这个问题。如果不可能，我会写JavaScript来解决，但我希望我的挣扎是因为我对CSS的无知。