是否可以定义一个最大列数的网格，但是当屏幕宽度改变时允许元素包装到新行上？
我有隐式类，允许行包装到新行上，但是没有最大列数。
这是使用弹性盒的一种方法的代码笔
CSS：
.flex-container {
display: flex;
flex-wrap: wrap;
}
另一种方法是使用网格
.grid {
display: grid;
counter-reset: grid-items;
position: relative;
}
.grid--auto-fit {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
我想要一个相当通用的解决方案，没有Java脚本或媒体查询，我想实现的目标是否可能？
我来自一个沉重的 div/float 背景来构建响应式站点（例如 Bootstrap 3、Foundation）并简要使用 Flex box，但一直尝试在任何地方使用 Grid，因为它在解决许多问题方面非常出色。我似乎经常遇到这样的“简单”问题，并且觉得我缺少一些基础知识，并且在文档中找不到答案。无论如何，到代码。
给定一个像这样的网格设置：
display: grid;
grid-auto-columns: max-content;
grid-auto-flow: column;
一旦内容填充了其父元素的宽度，内容就不会换行到新行。理想情况下，我可以让它自动换行，而无需预先定义精确的像素测量值，例如grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));. 这似乎不能满足我的需求——我必须grid-template-columns为不同的视口定义多个测量值，并知道列内项目的合适宽度是多少。我更愿意说grid-auto-columns: max-content;然后让项目简单地换行。
这可能与网格吗？我错过了什么/误解了什么？
请参阅 Codepen 的完整示例来演示该问题：https ://codepen.io/csdv/pen/OrbrzJ
有没有办法在不使用媒体查询的情况下限制创建的列数,并将其与自动调整/填充相结合？
例如:
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
创建精彩,响应迅速的布局.但想象一下,设计最多需要3列 - 即使在广泛的浏览器中也是如此.如果空间允许,它会愉快地显示4,5个更多列.
使用媒体查询,我可以指定大屏幕获取:
grid-template-columns: 1fr 1fr 1fr;
小屏幕得到:
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
但这感觉不对.有没有办法告诉我的网格布局重复最多n次,仍然使用重复和自动适合/填充？
更新:这不是重复:如何使用CSS网格和自动填充/拟合限制较大视口中的列数？
我问如何使视口的代码也适用于较小的视口.上面提到的问题(和答案)只是我的问题的起点.