是否可以在不使用媒体查询的情况下制作 CSS 网格换行？
就我而言，我想要将不确定数量的项目放置在网格中，并且希望该网格进行换行。使用 Flexbox，我无法可靠地很好地间隔事物。我也想避免一堆媒体查询。
Here's 一些示例代码:
.grid {
display: grid;
grid-gap: 10px;
grid-auto-flow: column;
grid-template-columns: 186px 186px 186px 186px;
}
.grid > * {
background-color: green;
height: 200px;
}<div class="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>这是一个 GIF 图片：
作为旁注，如果有人能告诉我如何避免指定像我这样的所有项目的宽度grid-template-columns那太好了。我希望孩子们指定自己的宽度。
使用任一auto-fill or auto-fit作为第一个参数repeat()符号。
<auto-repeat>的变体repeat()符号：
repeat( [ auto-fill | auto-fit ] , [ <line-names>? <fixed-size> ]+ <line-names>? )
auto-fillWhen
auto-fill给出重复次数，如果网格 容器有一个definite相关轴上的尺寸或最大尺寸，然后 重复次数是最大可能的正整数 这不会导致网格溢出其网格容器。https://www.w3.org/TR/css-grid-1/#valdef-repeat-auto-fill
.grid {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fill, 186px);
}
.grid>* {
background-color: green;
height: 200px;
}<div class="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>网格将重复尽可能多的轨道，而不会溢出其容器。
在这种情况下，考虑到上面的例子（见图），只有 5 个轨道可以容纳网格容器而不溢出。我们的网格中只有 4 个项目，因此在剩余空间内创建第五个项目作为空轨道。
剩余空间的其余部分，轨道#6，结束显式网格。这意味着没有足够的空间放置另一条轨道。
auto-fitThe
auto-fit关键字的行为与auto-fill， 除了 之后网格项目放置任何空的重复轨道都会被折叠。https://www.w3.org/TR/css-grid-1/#valdef-repeat-auto-fit
.grid {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fit, 186px);
}
.grid>* {
background-color: green;
height: 200px;
}<div class="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>网格仍将重复尽可能多的轨道而不溢出其容器，但空轨道将折叠为0.
折叠轨道被视为具有固定轨道大小函数0px.
不像auto-fill例如，空的第五个轨道被折叠，在第四个项目之后结束显式网格。
auto-fill vs auto-fit
当minmax()使用函数。
Use minmax(186px, 1fr)将项目范围从186px to a 网格容器中剩余空间的一部分.
使用时auto-fill，一旦没有空间放置空轨道，项目就会增长。
.grid {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(186px, 1fr));
}
.grid>* {
background-color: green;
height: 200px;
}<div class="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>使用时auto-fit，项目将增长以填充剩余空间，因为所有空轨道将折叠到0px.
.grid {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fit, minmax(186px, 1fr));
}
.grid>* {
background-color: green;
height: 200px;
}<div class="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>操场：
检查自动填充轨道
检查自动调整轨道
