CSS Grid：子元素数量为奇数时如何实现每行子元素数量均等？

核心思路：用容器查询替代视口媒体查询 #

媒体查询依赖视口宽度，在不同容器复用容易失效，改用CSS容器查询就能解决——它基于容器自身的宽度触发样式，不管容器在页面的哪个位置，适配性更强。同时通过Grid的auto-fit+minmax保证子元素宽度一致。

实现代码 #

/* Grid容器基础样式 */
.grid-container {
  display: grid;
  /* 子元素最小宽度200px，超出后自动平分容器宽度 */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  /* 开启容器查询上下文 */
  container-type: inline-size;
}

/* 子元素统一样式，保证宽度一致 */
.grid-item {
  padding: 1.5rem;
  background-color: #f0f0f0;
  border-radius: 4px;
  text-align: center;
}

/* 容器宽度刚好能放2个、但放不下3个子元素时，隐藏最后一个 */
@container (min-width: calc(2 * (200px + 1rem))) and (max-width: calc(3 * (200px + 1rem) - 1px)) {
  .grid-item:last-child {
    display: none;
  }
}

/* 容器宽度缩小到只能放1个子元素时，显示最后一个 */
@container (max-width: 200px) {
  .grid-item:last-child {
    display: block;
  }
}

方案优势 #

• 复用性强：基于容器宽度触发，不管容器嵌套在任何父元素中，只要自身宽度符合条件就生效，解决了媒体查询依赖视口的局限性。
• 子元素宽度一致：minmax(200px, 1fr)保证所有子元素在每行中宽度自动平分，最小宽度不低于设置值。
• 无需硬编码视口断点：完全基于容器和子元素的尺寸逻辑，不用手动适配不同屏幕尺寸的断点。

兼容性说明 #

容器查询目前已被Chrome、Firefox、Edge等主流现代浏览器支持，如果需要兼容旧版浏览器，可以借助PostCSS的postcss-container-queries插件做降级处理。

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