无需JavaScript实现CSS Grid动态行布局的方法问询

嘿，作为只掌握HTML和CSS基础的同学，你的需求完全可以实现！不用写一行JS，也不用每次加内容都手动修改CSS或者新增网格项，咱们一步步来解决：

核心思路：用grid-auto-rows实现动态行数 #

你之前用grid-template-rows: repeat(20, 10px)是固定了20行，这就导致行数不够时得改CSS，行数多了又会有空白区域。换成grid-auto-rows就完美解决了——这个属性会让Grid自动根据内容数量生成需要的行，完全不用提前指定行数，也不会出现多余的空白。

实现两行交替配色 #

根据你想要的“两行重复为基础布局”，分两种常见场景给你示例：

场景1：单列布局（每行一个内容项） #

这种情况下，奇数行和偶数行分别用不同颜色，直接用nth-child伪类给网格项设置背景色就行：

<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>
  <!-- 随便加多少个grid-item都可以，不用改CSS -->
</div>

.grid-container {
  display: grid;
  grid-template-columns: 1fr; /* 单列布局，宽度占满容器 */
  grid-auto-rows: 40px; /* 每行的高度，按需调整 */
  gap: 2px; /* 可选：网格项之间的间距 */
}

/* 奇数行（第1、3、5...个item）用浅灰色 */
.grid-item:nth-child(odd) {
  background-color: #f5f5f5;
  display: flex;
  align-items: center;
  padding: 0 10px;
}

/* 偶数行（第2、4、6...个item）用深灰色 */
.grid-item:nth-child(even) {
  background-color: #e8e8e8;
  display: flex;
  align-items: center;
  padding: 0 10px;
}

场景2：多列布局（比如每行两个内容项） #

如果是每行放两个内容，想要“两行一组”的配色（第1、2行同色组，第3、4行重复该组），只需要调整nth-child的公式：

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 两列布局，每列宽度平分 */
  grid-auto-rows: 40px;
  gap: 2px;
}

/* 第1、2行的所有item用浅灰色（对应第1、2、5、6...个item） */
.grid-item:nth-child(4n+1),
.grid-item:nth-child(4n+2) {
  background-color: #f5f5f5;
  display: flex;
  align-items: center;
  padding: 0 10px;
}

/* 第3、4行的所有item用深灰色（对应第3、4、7、8...个item） */
.grid-item:nth-child(4n+3),
.grid-item:nth-child(4n+4) {
  background-color: #e8e8e8;
  display: flex;
  align-items: center;
  padding: 0 10px;
}

关键知识点总结 #

• 用grid-auto-rows代替固定的grid-template-rows，Grid会自动生成所需行数，没有多余空白，新增内容也不用改CSS。
• 交替配色完全靠CSS伪类nth-child实现，不用给每个网格项加不同的类，维护起来超简单。
• 不管你加多少个grid-item，布局都会自动适配，完全满足你“添加内容无需手动修改CSS”的需求。

内容的提问来源于stack exchange，提问作者Andy Meza III