如何用CSS Grid实现蛇形网格并消除宽度间隙？

问题根源 #

你当前的代码存在两个核心冲突：

1. 手动设置.item的width与grid-template-columns的列定义冲突，导致网格布局计算混乱，产生间隙。
2. grid-gap和容器padding未纳入总宽度计算，加上蛇形布局的列规则不全，最终导致末尾和项间出现空白。

修改后的完整代码 #

CSS 代码

.flex-container {
  width: 100%;
  background: orange;
  display: grid;
  /* 计算列宽，扣除gap的一半，确保总宽度+gap=100% */
  grid-template-columns: calc(30% - 10px) calc(70% - 10px);
  grid-gap: 20px;
  padding: 10px;
  box-sizing: border-box; /* 让padding包含在总宽度内 */
}

.item {
  background: purple;
  height: 80px;
  line-height: 80px;
  color: white;
  font-weight: bold;
  font-size: 2em;
  text-align: center;
}

/* 蛇形布局规则：第3、7、11...项占第二列 */
.item:nth-child(4n + 3) {
  grid-column: 2;
}
/* 第4、8、12...项占第一列 */
.item:nth-child(4n) {
  grid-column: 1;
}

HTML 代码

<div class="flex-container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
  <div class="item">11</div>
  <div class="item">12</div>
  <div class="item">13</div>
  <div class="item">14</div>
  <div class="item">15</div>
  <div class="item">16</div>
  <div class="item">17</div>
  <div class="item">18</div>
</div>

关键修改说明 #

• box-sizing: border-box：强制容器的padding包含在100%宽度内，避免整体布局超出父容器范围。
• calc()定义列宽：由于grid-gap会额外占用空间，每列宽度需扣除gap的一半（20px gap对应每列减10px），确保列宽+gap的总宽度恰好为100%。
• 移除手动width设置：grid布局中，列宽由grid-template-columns控制，手动设置.item的width会干扰网格计算，引发间隙。
• 完善蛇形布局规则：补充4n项的列定位，实现“左-右-右-左”的交替蛇形排列，避免空白单元格出现。
• 移除grid-auto-flow: dense：当前布局规则已完全匹配，无需自动填充空白，避免不必要的布局调整。

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