在卡片列表、商品展示、相册网格等场景中，奇偶数量元素的排版问题几乎无法绕开。假设一个固定三列的商品列表，容器内放入 8 个卡片，前两行各 3 个，最后一行只剩 2 个。如果使用常规的 Flexbox 并设置 justify-content: space-between，最后两个元素会被一左一右拉开，中间留出大片空白；如果使用 Grid 并显式声明三列，最后一行则只有两个单元格被填充，第三个位置保持空缺。这些表现本身并没有对错，但视觉上往往不符合设计预期。本文从 CSS 原生能力出发，梳理几种不依赖 JavaScript 的稳定处理手段，并分析各自适用场景。
问题根源：奇偶数量为何会破坏布局整齐度
Flexbox 在处理换行时，每一行都会被当作一个独立的主轴空间。当最后一行元素数量少于前面行时，justify-content 的值会直接作用于这一行。比如设置为 center 会让最后两个元素跑到整行中间，设置为 space-between 会将它们推向两端。即便使用 flex-grow: 1 让元素拉伸，奇数个元素也可能被强行放大到填满整行，导致尺寸与前面行不一致。
Grid 布局则更偏向结构化的轨道系统。如果显式定义了 grid-template-columns: repeat(3, 1fr)，那么无论元素总数是多少，每一行都严格存在三列轨道。最后一行不足三个元素时，剩余轨道仍然保留，只是没有元素填充。这种方式虽然不会拉伸元素，但空白位置是固定的，无法自动让最后一行元素靠左排列。因此，奇偶数量问题的核心不在于选择 Flex 还是 Grid，而在于是否能让布局理解最后一行的实际项目数量，并据此调整轨道或占位。
Grid 方案：用 auto-fill 与 auto-fit 自动计算列数
auto-fill 和 auto-fit 是 Grid 布局中处理不定数量子项的关键字。它们都可以配合 repeat() 和 minmax()，让浏览器根据容器宽度自动决定列数。区别在于：auto-fill 会保留空的轨道，即使没有足够元素填充，仍然占据空间；auto-fit 会折叠空轨道，让现有元素能够自由伸缩。对于奇偶数量排版，auto-fit 通常更合适，因为它不会留下固定空列，最后一行元素可以自然撑开或保持左对齐。
下面是一段可复用的 Grid 代码。通过 minmax(220px, 1fr) 设置轨道最小宽度，当容器变窄时自动减少列数，变宽时自动增加列数。这样无论元素数量是奇数还是偶数，都不需要手动计算列数，布局会自动适应视口。
.grid-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 16px;
}
这种方案的最大优点是代码量极少，响应式能力很强。但需要注意，auto-fit 会让最后一行元素通过拉伸填满整行，如果你希望最后一行奇数项保持与其他行一致的固定宽度并靠左对齐，那么 auto-fit 并不完全满足。此时可以在子项上使用 max-width 限制拉伸范围，或者改用后面提到的 Flex 占位方案。
Flex 方案：伪元素与空标签补齐最后一行
Flexbox 虽然没有 Grid 的自动折叠轨道能力，但可以借助占位元素模拟完整行。思路是：在列表末尾添加两个高度为 0 且不可见的占位元素，数量等于列数减一。例如三列布局中，最后一行可能剩 1 或 2 个元素，如果只补两个占位元素，剩 2 个时仍然不够；更可靠的做法是始终补齐到列数的倍数。不过纯 CSS 无法动态知道总元素数量，所以需要手动在 HTML 中插入若干空标签，或者利用伪元素 ::after 配合 flex-grow 实现有限度的占位。
伪元素方案适合列数固定且最后一行缺一个元素的场景。给容器设置 display: flex; flex-wrap: wrap;，再通过 ::after 添加一个与子项宽度一致的占位块。下面是一个三列布局的示例，子项宽度为 calc((100% - 32px) / 3)，::after 使用相同的宽度，但高度为 0，不会影响视觉。
.flex-list {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.flex-list::after {
content: "";
flex: 0 0 calc((100% - 32px) / 3);
height: 0;
}
这种方式的局限在于只能应付缺失一列的情况，如果最后一行缺失两个或更多，就需要插入多个占位元素。实际项目中可以将占位元素放在列表末尾，通过 aria-hidden="true" 避免辅助技术读取。代码维护成本略高，但视觉控制非常直观，适合列数固定、元素数量不会剧烈变化的场景。
伪类选择器：精确命中最后几个元素
当列数固定时，可以利用 :nth-child 和 :last-child 对最后几个元素做定向调整。假设三列布局，最后一行如果只有两个元素，我们可以让倒数第二个元素占一半宽度，最后一个元素占一半宽度，两者左对齐；如果只剩一个元素，则让其占三分之一宽度，保持与其他元素相同的尺寸。核心思路是使用 :nth-child(3n+1):last-child 这种组合选择器来区分情况。
以下代码处理三列布局中最后一行只有两个元素的情况。当某个元素既是第 3n+1 个（即本行第一个）又是最后一个时，说明最后一行只有一个元素，保持默认宽度；当倒数第二个元素是第 3n+2 个时，说明最后一行只有两个元素，可适当调整宽度。不过这类选择器对元素数量变化敏感，条件组合也较为复杂，实际可读性较差。
.item:last-child:nth-child(3n+2) {
margin-right: auto;
}
.item:nth-last-child(2):nth-child(3n+2) {
flex: 0 0 calc((100% - 32px) / 3);
}
这种方案的优势是完全基于 CSS 选择器，不需要额外占位元素。但缺点是每当列数变化，就需要重新计算 3n+1、3n+2 这类公式，维护成本高。如果使用 CSS 变量配合 calc() 可以简化一部分，但仍然不如 Grid 的自动方案清晰。建议仅在元素数量确定且列数不会响应式变化的小型组件中使用。
方案对比与落地建议
综合来看，Grid 的 auto-fit 方案最适合响应式需求强、元素数量动态变化的列表。它不需要关心元素是奇数还是偶数，浏览器会自动处理轨道。Flex 占位方案则适合列数固定且视觉要求精准的项目，例如后台管理系统中的固定三列卡片。伪类选择器方案可以作为少量场景的补充，但由于可读性问题，不建议在大型项目中广泛使用。
需要特别提醒的是，有些开发者会尝试在容器上同时使用 justify-content: center 和 ::after 来居中最后一行，这样的组合容易在跨浏览器时产生不一致。优先选择布局引擎自身的特性，减少人工补位，才是处理奇偶数量排版的长久之道。无论采用哪种方案，建议在开发时用不同数量的数组做测试，尤其关注 1 个、2 个、列数减 1 个以及恰好整数倍这些边界情况。