CSS Grid弹性布局中两列能否设置相反的自动行高度顺序？

解决方案 #

可以通过grid-row跨行属性结合nth-child周期选择器实现需求，无需手动指定每个元素的位置，新增任意数量网格项都能自动适配规则。

实现思路 #

1. 把原全局统一的grid-auto-rows: 3fr 6fr改为基础行高1fr，用单元格跨行的方式实现不同列的高度比例差异
2. 利用4个一组的周期选择器匹配所有网格项，分别指定跨行高度：
   • 左列奇数位项（第1、5、9...个）跨3行，对应3fr比例
   • 右列奇数位项（第2、6、10...个）跨6行，对应6fr比例
   • 左列偶数位项（第3、7、11...个）跨6行，对应6fr比例
   • 右列偶数位项（第4、8、12...个）跨3行，对应3fr比例
3. 新增grid-auto-flow: dense避免出现空白间隙，保证元素自动填充可用位置

修改后的完整代码 #

<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 class="grid-item">10</div>
  <div class="grid-item">11</div>
  <div class="grid-item">12</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* 基础行高设为1fr，通过跨行实现比例，minmax避免内容溢出 */
  grid-auto-rows: minmax(0, 1fr);
  grid-gap: 5px;
  max-width: 60%;
  /* 需给容器设置固定高度才能让fr比例生效，可根据实际需求调整 */
  height: 900px;
  margin: 0 auto;
  /* 自动填充空白，避免间隙 */
  grid-auto-flow: dense;
}
.grid-item {
  background-color: lightblue;
  padding: 30px;
}
/* 周期匹配4个一组的元素，分别指定跨行高度 */
.grid-item:nth-child(4n - 3) {
  grid-row: span 3;
}
.grid-item:nth-child(4n - 2) {
  grid-row: span 6;
}
.grid-item:nth-child(4n - 1) {
  grid-row: span 6;
}
.grid-item:nth-child(4n) {
  grid-row: span 3;
}

效果说明 #

• 左列行高永远按3fr → 6fr → 3fr → 6fr循环
• 右列行高永远按6fr → 3fr → 6fr → 3fr循环
• 任意新增网格项都能自动适配规则，无需手动调整属性

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