修正CSS Grid布局：调整指定网格项尺寸问题

需要让序号为1,6,7,12,17,22……的网格项变大，但当前代码会让3,4,9,10,15,16……的网格项变大。要求：

• 网格项数量不确定，必须用nth-child选择器实现动态调整
• 避免逐个设置子元素样式

原代码片段 #

CSS

.grid {
  display: grid;
  grid-auto-flow: dense;
  grid-auto-rows: 100px;
  grid-auto-columns: 1fr;
  grid-gap: 5px;
}
.grid :nth-child(6n + 2) {
  grid-column: 1;
}
.grid :nth-child(6n + 3) {
  grid-area: span 2/2;
}
.grid :nth-child(6n + 4) {
  grid-row: span 2;
}

/**/
.grid {
  max-width: 600px;
  margin: auto;
  counter-reset: num;
}
.grid * {
  border: 2px solid;
  font-size: 30px;
  box-sizing: border-box;
  font-family: sans-serif;
  display: grid;
  place-content: center;
}
.grid *:before {
  content: counter(num);
  counter-increment: num;
}

HTML

<div class="grid">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

修正后的CSS代码 #

.grid {
  display: grid;
  grid-auto-flow: dense;
  grid-auto-rows: 100px;
  grid-auto-columns: 1fr;
  grid-gap: 5px;
}
/* 匹配序号1,7,13,19...（6n+1，n从0开始） */
.grid :nth-child(6n + 1) {
  grid-row: span 2;
  grid-column: span 1;
}
/* 匹配序号6,12,18,24...（6n，n从1开始） */
.grid :nth-child(6n) {
  grid-row: span 2;
  grid-column: span 1;
}

/**/
.grid {
  max-width: 600px;
  margin: auto;
  counter-reset: num;
}
.grid * {
  border: 2px solid;
  font-size: 30px;
  box-sizing: border-box;
  font-family: sans-serif;
  display: grid;
  place-content: center;
}
.grid *:before {
  content: counter(num);
  counter-increment: num;
}

修正说明 #

1. 选择器调整：
   • 目标序列1,6,7,12,17,22……可拆分为两个规律：
     • 每6个元素的第1个：6n + 1（n=0时为1，n=1时为7，n=2时为13，以此类推）
     • 每6个元素的第6个：6n（n=1时为6，n=2时为12，n=3时为18，以此类推）
   • 若你的目标序列实际是1,6,11,16,21...和7,12,17,22...（每5个元素的第1、2个），可改用nth-child(5n + 1)和nth-child(5n + 2)
2. 网格跨度设置：通过grid-row: span 2让目标项占据两行高度，grid-column: span 1保持一列宽度，可根据需求改为grid-column: span 2实现横向放大
3. 保留自动填充：grid-auto-flow: dense确保网格空隙被自动填充，避免布局出现空白

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