CSSGrid自动布局：normal与dense区别详解

本篇文章向大家介绍《CSS Grid中grid-auto-flow属性用于控制自动放置元素的顺序，它有两个主要值：normal和dense。它们的主要区别在于如何填充网格中的空白区域。1. grid-auto-flow: normal默认值。元素按照它们在HTML中的顺序依次填充到网格中，从左到右、从上到下。如果某个单元格没有被显式定位，浏览器会按顺序填充。不会重新排列已放置的元素来填补空白，因此可能会出现“空洞”。示例：.grid-container { display: grid; grid-template-columns: repeat(3, 100px); grid-auto-flow: normal; }2. grid-auto-flow: dense会尝试将后续的项目“挤入”前面的空白区域，以更紧凑地填充网格。这可能导致元素的布局顺序与HTML中的顺序不同，但可以减少网格中的空白。常用于需要最大化利用空间的布局，如图片墙或卡片流。示例：.grid-container { display: grid; grid-template-columns: repeat(3, 100px); grid-auto-flow: dense; }总结对比| 属性值 | 行为描述 | 是否调整已放置》，主要包括，具有一定的参考价值，需要的朋友可以参考一下。

grid-auto-flow: normal按顺序排列不回填空位，保持视觉流但可能浪费空间；dense则优先紧凑排列，允许小项目回填前面空缺以节省空间，但可能打乱阅读顺序。

在 CSS Grid 布局中，grid-auto-flow 属性用于控制自动放置的网格项如何被分配到网格容器中的空单元格。它有两个主要关键字值：normal 和 dense。它们的区别在于处理空缺位置时的行为方式。

grid-auto-flow: normal

这是默认行为。当设置为 normal 时，浏览器会按照行或列的顺序依次填充网格项，即使前面有空的单元格也不会“回填”。

说明：

• 网格项只向前推进，不会回头去填补之前留下的空白。
• 如果某个项目因为跨度（span）较大而跳过了某些格子，这些格子将保持为空，后续的小项目也不会去填充它们。
• 布局更可预测，但可能导致空间浪费。

grid-auto-flow: dense

使用 dense 模式时，浏览器会尝试尽可能紧凑地排列网格项，允许后面的较小项目“回填”前面留下的空白区域。

说明：

• 系统会查找可以容纳当前项目的最小空位，并将其放入其中，以减少空白区域。
• 虽然能提升空间利用率，但可能打乱视觉顺序，影响可读性或逻辑结构。
• 适合内容顺序不敏感的展示场景，比如图库、卡片列表等。

实际例子对比

假设有一个 3 列网格，项目 1 占 2 列，项目 2 占 1 列：

• 用 normal：项目 2 会排在第 3 格，第 4 格开始下一行，即使第 1 行第 3 格之后有空间，也不回填。
• 用 dense：如果有更小的项目出现在后面，它们可能会被提前放到前面未使用的格子里，哪怕这改变了原本的视觉流。

基本上就这些。dense 更省空间但可能影响阅读顺序，normal 更符合自然流程但可能留下空洞。根据你的布局需求选择合适模式。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。