嘿，这个问题我之前做响应式网格的时候刚好碰到过，给你一个超简洁的解决方案——完全不用额外的.col元素，同时兼容CSS Grid和Flexbox，而且Grid的样式一点都不会变复杂：

核心思路 #

我们用同一个极简DOM结构，分别给Grid和Flexbox写样式，通过渐进增强的方式让支持Grid的浏览器用Grid（样式超简单），不支持的用Flexbox，两边都能实现从上到下、从左到右的3×3填充顺序。

第一步：共用的DOM结构 #

就一个容器直接包所有网格项，完全不需要列容器：

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
</div>

第二步：CSS实现（渐进增强） #

先写Flexbox的兼容样式，再用@supports给支持Grid的浏览器替换成Grid样式，这样两边都能正常工作：

/* 通用基础样式 */
.grid-container {
  width: 100%;
  box-sizing: border-box;
  gap: 1rem; /* 网格间距，现在大部分浏览器都支持Flexbox和Grid的gap了 */
}

.grid-item {
  padding: 1rem;
  background: #f0f0f0;
  box-sizing: border-box;
}

/* Flexbox 兼容方案（不支持Grid的浏览器用这个） */
.grid-container {
  display: flex;
  flex-wrap: wrap; /* 这里你之前可能写错了，是wrap不是row——row是flex-direction的取值，wrap才会让元素换行 */
}

.grid-item {
  flex: 0 0 calc(33.333% - 0.666rem); /* 减去gap的占比，确保3列刚好放下 */
}

/* Grid 实现（支持Grid的浏览器会覆盖上面的Flexbox样式） */
@supports (display: grid) {
  .grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 这一行就搞定3列，复杂度为0 */
  }

  .grid-item {
    flex: initial; /* 重置Flexbox的flex属性，避免干扰Grid */
    width: auto; /* 重置宽度，让Grid自动控制 */
  }
}

为什么这能行？ #

• Grid部分：本来就不需要列容器，grid-template-columns: repeat(3, 1fr)直接定义3列，填充顺序默认就是从上到下、从左到右，完全符合你的需求，样式简洁到没朋友。
• Flexbox部分：通过flex-wrap: wrap让元素一行满了自动换行，flex: 0 0 calc(33.333% - 0.666rem)控制每个项占1/3宽度（减去gap的分摊值），实现和Grid一样的3列布局，顺序也完全一致，而且不用额外的.col元素。

如果要兼容非常老的浏览器（比如不支持Flexbox gap的），可以把gap换成margin模拟：给.grid-item加margin: 0 0.5rem 0.5rem 0，然后给.grid-container加margin: -0.5rem，效果是一样的。

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