CSS 网格布局 - 自动适应列流，如何处理行？ [复制]

Question

我希望有人可以帮助我，我一生都无法理解自动适应/填充网格布局的工作原理。我知道基本的 CSS，但我以前从未使用过网格布局。

我有大量带有标签的复选框项目，我想将它们排列成几列（取决于屏幕大小），并带有列流。

我已经成功使用

grid-template-columns: repeat( auto-fit, minmax(200px, 1fr) );

这给了我几乎正确的东西，但只要我添加

grid-auto-flow: column;

它只输出 1 行数百列。我已经尝试阅读有关其工作原理的文章，并尝试了 grid-row-template 和 grid-column-template 的不同配置，但我无法获得令人满意的结果。我不想指定确切的行数，因为项目的数量可能会发生变化，它应该只根据需要填写它们，同时保持列适合屏幕并保持相同的宽度。

我将尝试添加我的代码示例，我希望它有意义，因为我正在使用 Smalltalk 从存储库中提取复选框项目并将 HTML 打印到浏览器。

样式

.grid-container {
    font-size: .7em;
    display: grid;
}
.grid-container--fit {
    grid-template-columns: repeat( auto-fit, minmax(250px, 1fr) );

Smalltalk 打印 HTML，迭代生成每个复选框元素。

aHTML nextPutAll: '<form><div class="grid-container grid-container--fit">'.
    subjectItems do: [ :i | aHTML nextPutAll: '<label><input type="checkbox" name="subjects" value="', i description, '">', i description, '</label><br>' ].

    aHTML nextPutAll: '</div></form>'.

Answer 1

可以感觉到这两者之间的实际区别当您没有足够的列在一行中并且有一个完整的视口宽度时，自动填充所做的是它将用空白列填充额外的空间，这里另一方面，自动调整不会填充空白空间，它将添加列并仅在此处结束，例如，如果我们有 3 列全宽，那么它将在中途结束，您将无法访问剩余的一半剩余空间。

就像我们知道自动填充添加空列来填充空间有什么用？ 此处的用途是，如果您想通过使用 grid-column 更改任何列位置，它将起作用，我们可以使用剩余的空白空间，例如，如果我们想将列放在行的末尾，那么它将占用容器的实际宽度与自动调整不同。很难像这样解释。希望你去。