CSS多列多行Article布局异常求助：首行3个后次行仅显示1个

嘿，我来帮你搞定这个3列多行布局的问题！这种首行3个、第二行只显示1个的情况，大概率是元素宽度计算或者布局属性没设置对导致的，下面给你几个最常见的解决方案：

先排查核心问题 #

通常这种情况的原因有两个：

• 某个article的宽度被误设置成了100%，直接占满整行
• 布局容器的换行规则或者宽度分配没算对，导致剩余空间不足以放下第二个元素

方案1：用Grid布局（推荐，更直观） #

Grid天生适合这种多行多列的规整布局，直接给你的section加上以下样式：

section {
  display: grid;
  /* 自动填充，最多3列；每列最小宽度280px（可按需调整），剩余空间均分 */
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  /* 元素之间的间距，可根据需求调整大小 */
  gap: 1.5rem;
  padding: 1rem; /* 可选，给容器加内边距优化视觉 */
}

article {
  box-sizing: border-box; /* 确保padding/border不会额外增加元素宽度 */
  /* 这里添加你自己的article样式，比如背景、边框等 */
  border: 1px solid #ddd;
  padding: 1rem;
}

这个设置会自动根据容器宽度调整列数：空间足够时显示3列，空间缩小时自动减少列数，同时保证每行元素均匀分布。

方案2：用Flex布局（如果习惯用flex） #

如果你的项目依赖flex布局，需要注意宽度的精确计算（要减去元素之间的间距）：

section {
  display: flex;
  flex-wrap: wrap; /* 必须添加，允许元素换行 */
  gap: 1.5rem;
  padding: 1rem;
}

article {
  /* flex: 增长因子 收缩因子 基础宽度 */
  flex: 1 1 calc(33.333% - 1rem);
  min-width: 280px; /* 小屏幕下自动变成单列/双列 */
  box-sizing: border-box;
  border: 1px solid #ddd;
  padding: 1rem;
}

这里的calc(33.333% - 1rem)是关键：33.333%对应每行3列的基础宽度，减去gap的一半（因为flex的gap是元素间的间距，每行有两个间距，所以每个元素要减去1rem才能让总宽度刚好填满容器）。

额外排查点 #

• 检查有没有给某个article单独设置了width: 100%或者flex-basis: 100%，这会让它直接占满整行
• 建议全局设置box-sizing: border-box;，避免padding和border导致元素宽度超出预期：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

如果还是有问题，可以把你的代码贴出来，我帮你再细查！

内容的提问来源于stack exchange，提问作者PiR