CSSGrid自动布局详解：row与column区别

知识点掌握了，还需要不断练习才能熟练运用。下面golang学习网给大家带来一个文章开发实战，手把手教大家学习《CSS Grid的grid-auto-flow属性用于控制自动放置算法的行为，它有row、column、dense和normal四个值。其中，dense和normal的区别在于它们对空白区域的处理方式不同。1. grid-auto-flow: normal默认值。自动放置项目时，会按顺序从左到右、从上到下填充网格。如果某个位置没有被显式放置，项目会跳过该位置，继续填充下一个可用位置。这种方式保持了项目的自然顺序，但可能导致网格中出现较大的空白区域。示例：.grid-container { display: grid; grid-template-columns: repeat(3, 100px); grid-auto-flow: normal; }2. grid-auto-flow: dense自动放置项目时，会尽可能填入最靠近起始点的空白区域，而不是严格按顺序填充。这样可以减少网格中的空白区域，使布局更紧凑。但可能会打乱项目的自然顺序，因为项目可能被“跳过”并重新插入到前面的空白位置。示例：.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 更符合自然流程但可能留下空洞。根据你的布局需求选择合适模式。

理论要掌握，实操不能落！以上关于《CSSGrid自动布局详解：row与column区别》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！