如何创建特定行列规则的CSS Grid并实现子组样式控制？

一、核心布局实现 #

我们可以通过CSS Grid的基础列定义，结合nth-child选择器来实现这种交替布局——以5个元素为一个周期，前3个按3列排列，后2个通过调整列跨度形成2列行的效果。

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 基础列数设为3 */
  gap: 1rem; /* 元素间间距，可按需调整 */
}

/* 每5个元素中的第4、5个，各占1.5fr，刚好填满3fr的行宽，形成2列视觉效果 */
.grid-container > div:nth-child(5n + 4),
.grid-container > div:nth-child(5n + 5) {
  grid-column: span 1.5;
}

HTML结构示例：

<div class="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <!-- 可继续添加任意数量div元素 -->
</div>

二、子组元素的样式控制 #

1. 选中单个特定子组 #

如果需要针对某一组（比如1-3、4-5这类独立子组）设置样式，用范围选择器精准定位：

/* 第一个子组（元素1-3） */
.grid-container > div:nth-child(-n + 3) {
  background-color: #f0f0f0;
}

/* 第二个子组（元素4-5） */
.grid-container > div:nth-child(n + 4):nth-child(-n + 5) {
  background-color: #e0e0e0;
}

/* 第三个子组（元素6-8） */
.grid-container > div:nth-child(n + 6):nth-child(-n + 8) {
  background-color: #d0d0d0;
}

/* 第四个子组（元素9-10） */
.grid-container > div:nth-child(n + 9):nth-child(-n + 10) {
  background-color: #c0c0c0;
}

2. 批量选中同类型子组 #

如果需要给所有3元素子组或2元素子组统一设置样式，利用5元素周期的规律即可：

/* 所有3元素子组的元素（1-3、6-8、11-13...） */
.grid-container > div:nth-child(5n + 1),
.grid-container > div:nth-child(5n + 2),
.grid-container > div:nth-child(5n + 3) {
  border: 1px solid blue;
}

/* 所有2元素子组的元素（4-5、9-10、14-15...） */
.grid-container > div:nth-child(5n + 4),
.grid-container > div:nth-child(5n + 5) {
  border: 1px solid red;
}

三、效果说明 #

• 新增元素会自动遵循“3列行→2列行”的循环规律排列，无需修改CSS。
• 通过nth-child选择器可以灵活定位任意子组，实现个性化样式调整。

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