Css 如何创建具有相同水槽/长方体宽度的自动流体网格？

我在措辞上有点困难，这可能是我找不到任何答案的主要原因

我有一个容器，包含多个（精确计数未知）元素，我想在一个漂亮灵活的网格中显示它们。我唯一的要求是所有行上的框大小相等，并且框之间的边距也相同。当然，对于他们来说，要使用整个柱子的宽度

假设我有5个盒子，一行可以显示3个，第一行需要3个盒子，第二行需要2个

查看以下内容，获取一些额外的视觉帮助：

显示灵活，灵活启动

|########  ########  ########         |
|########  ########                   |

显示灵活，灵活1

|###########  ###########  ###########|
|#################  ##################|

显示弹性，间距

|########       ########      ########|
|########                     ########|

显示弹性，周围有空间

|########      ########       ########|
|       ########        ########      |

选项1：等边沟

|########       ########      ########|
|########       ########              |

选项2：等宽

|###########  ###########  ###########|
|###########  ###########             |

如您所见，有两种可能的结果我会接受，但如果没有javascript，我不知道如何实现它们。
仅使用CSS是否可以实现这两种功能

---

现在我已经决定使用flex start，但我希望有人能帮我解决这个问题。

当然，只是不要在

框中使用固定宽度的
元素


.container{
边框：1px实心；
填充：15px 0 0 15px；
利润率：15px自动；
宽度：100%；
最大宽度：960像素；
显示器：flex；
柔性包装：包装；
}
.盒子{
高度：32px；
宽度：计算（（100%/3）-15px）；
框大小：边框框；
边缘底部：15px；
右边距：15px；
边框：1px实心；
背景色：#D0；
}

试试这个：

* {
    margin: 0; padding: 0;
    box-sizing: border-box;
}

.container {
    border: 1px solid;
    padding: 15px 0 0 15px;
    margin: 15px auto;
    width: 100%;
    max-width: 960px;
    display: flex;
    flex-wrap: wrap;
}

.box {
    height: 32px;
    flex: 0 0 calc(calc(100%/3) - 15px);
    margin-bottom: 15px;
    margin-right: 15px;
    border: 1px solid;
    background-color: #D0D0D0;
}

为什么不完全采用flexbox的方式：
.box{…flex:0（计算（100%/3）-15px）；…}
谢谢你的评论@AjayGupta！如果你能用你的方法发布另一个答案，我会很高兴。我可能会学到一两件事：）谢谢你的建议！这与媒体查询相结合将是我选择的解决方案。好。。。我将使用@AjayGupta的解决方案^^我想你可以把
calc（calc（100%/3）-15px）
简化为
calc（（100%/3）-15px）
，但除此之外，它很棒！非常感谢。我更多的是一个不太喜欢CSS的人，如果你在括号前写上“calc”也没关系。无论如何，谢谢。这太棒了，再加上媒体的查询，我甚至可以让它更流畅。我更喜欢沙斯，而不是个人：——）