CSS 网格中的自动填充与自动调整：有什么区别？

了解网格布局中自动填充和自动调整之间的区别

使用 CSS 网格时，您经常会遇到术语“在建立基于卡片的网格布局的背景下，“自动填充”和“自动适合”。这些属性决定网格如何处理可用项目可能无法完全填满可用空间的情况。

自动填充与自动调整

均自动填充和自动调整创建指定数量的网格轨道（列或行），但当可用项目不足以填充所有网格时，它们的行为会有所不同

• 自动调整：如果没有足够的项目来填充所有轨道，则空轨道将折叠，现有项目将展开以填充释放的空间。
• 自动填充：与自动调整不同，自动填充中会保留空轨道，从而形成固定的网格布局，无论项目数量如何。

对卡片显示的影响

在卡片网格布局中，使用自动填充而不是自动调整将确保即使只有少数卡片，这些卡片仍然显示为单独的实体。通过保持固定的网格结构，自动填充可以使您的卡片均匀分布并清晰分开。

示例

考虑以下代码：

.wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}

通过自动填充，网格容器将创建尽可能多的列，而不会溢出包装器，无论是否有足够的卡片来填充所有列。现有卡片将均匀间隔并独立显示，保留卡片布局。

结论

在自动填充和自动调整之间进行选择取决于所需的行为具有不同项目数量的场景。自动填充是保持一致的网格结构的首选，而自动调整会折叠空轨道以允许项目扩展并填充可用空间。

以上是CSS 网格中的自动填充与自动调整：有什么区别？的详细内容。更多信息请关注PHP中文网其他相关文章！