如何创建列宽动态交替变化的网格布局实现规则重复的图片画廊？

你不需要修改现有JS代码，仅通过新增CSS样式即可实现需求，布局规律会自动适配任意新增的图片元素，完全符合你提到的grid相关属性使用要求。

核心CSS代码 #

.gallery-container {
  display: grid;
  /* 拆分10列网格，每列占10%宽度，方便匹配40%/60%占比 */
  grid-template-columns: repeat(10, 1fr);
  /* 统一行高，可根据需求调整数值，也可用minmax(200px, auto)自适应 */
  grid-auto-rows: 300px;
  /* 图片间距，按需调整 */
  gap: 16px;
}

/* 图片自适应填充网格单元，避免变形 */
.gallery-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 周期匹配：每4个元素为一个布局循环 */
/* 第1、5、9...个元素：占4份宽度（40%） */
.gallery-container img:nth-child(4n - 3) {
  grid-column: span 4;
}
/* 第2、6、10...个元素：占6份宽度（60%） */
.gallery-container img:nth-child(4n - 2) {
  grid-column: span 6;
}
/* 第3、7、11...个元素：占6份宽度（60%） */
.gallery-container img:nth-child(4n - 1) {
  grid-column: span 6;
}
/* 第4、8、12...个元素：占4份宽度（40%） */
.gallery-container img:nth-child(4n) {
  grid-column: span 4;
}

方案说明 #

• 布局周期为4个元素，自动无限循环，无论新增多少张图片都会自动适配「40% 60% / 60% 40%」的交替规律
• 行高由grid-auto-rows统一控制，所有行高度完全一致
• 图片通过object-fit: cover保证填充网格的同时不会拉伸变形，可根据需求替换为contain等属性
• 不需要修改你现有JS逻辑，动态生成的图片元素会自动匹配样式规则

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