如何动态重复grid-template-areas适配WordPress图片网格布局？

你当前的问题在于使用了固定的grid-template-areas和仅适配前10个元素的nth-child定位，当元素数量超过10时，额外的元素没有对应的网格区域定义，自然会导致布局失效。要实现动态重复的网格布局，我们可以抛弃固定的区域命名，改用公式化的nth-child选择器结合grid-column/grid-row的跨列跨行设置，让布局自动适配任意数量的元素。

修改后的CSS代码 #

.grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* 保留5列基础布局 */
  grid-gap: 30px;
  grid-auto-rows: auto; /* 自动根据内容生成行高 */
}

/* 匹配每组第6个元素（10n+6，如6、16、26...）：跨2列 */
.grid .grid-item:nth-child(10n + 6) {
  grid-column: span 2;
}

/* 匹配每组第7个元素（10n+7，如7、17、27...）：跨2列+2行 */
.grid .grid-item:nth-child(10n + 7) {
  grid-column: span 2;
  grid-row: span 2;
}

/* 匹配每组第8个元素（10n+8，如8、18、28...）：跨2行 */
.grid .grid-item:nth-child(10n + 8) {
  grid-row: span 2;
}

/* 第9、10个元素默认占1列1行，无需额外设置，若需调整可补充 */

为什么这样有效？ #

• 抛弃固定的grid-template-areas后，CSS Grid会自动管理网格的行生成（通过grid-auto-rows: auto）。
• 公式化的nth-child(10n + x)选择器会匹配每10个元素为一组的第x个元素，不管元素总数多少，都会重复你想要的布局模式：
  1. 每组前5个元素：默认占1列1行，填满第一行。
  2. 第6个元素：跨2列，占据第二行前两格。
  3. 第7个元素：跨2列+2行，占据第二、三行的中间两格。
  4. 第8个元素：跨2行，占据第二、三行的最后一格。
  5. 第9、10个元素：各占1列1行，填满第三行的前两格。

测试用HTML（含20个元素） #

<div class="grid">
  <div class="grid-item">GridItem1</div>
  <div class="grid-item">GridItem2</div>
  <div class="grid-item">GridItem3</div>
  <div class="grid-item">GridItem4</div>
  <div class="grid-item">GridItem5</div>
  <div class="grid-item">GridItem6</div>
  <div class="grid-item">GridItem7</div>
  <div class="grid-item">GridItem8</div>
  <div class="grid-item">GridItem9</div>
  <div class="grid-item">GridItem10</div>
  <div class="grid-item">GridItem11</div>
  <div class="grid-item">GridItem12</div>
  <div class="grid-item">GridItem13</div>
  <div class="grid-item">GridItem14</div>
  <div class="grid-item">GridItem15</div>
  <div class="grid-item">GridItem16</div>
  <div class="grid-item">GridItem17</div>
  <div class="grid-item">GridItem18</div>
  <div class="grid-item">GridItem19</div>
  <div class="grid-item">GridItem20</div>
</div>

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