自定义布局的可滚动Grid开发问题求助

问题分析 #

原代码的核心问题在于：

1. 固定了Grid的列数（repeat(4, 230px)），元素数量超过7个后无法自动扩展布局
2. 选择器错误（用了5n+1而非7n+1），不符合每7个元素重复一次大元素的需求
3. margin-right与gap混用导致间距混乱

修正后的代码 #

CSS

.horizontal-scroll-container {
  width: 100%;
  overflow-x: scroll;
}

.grid {
  display: grid;
  grid-template-rows: repeat(2, 153px); /* 固定两行高度 */
  grid-auto-columns: 230px; /* 自动生成的列宽度统一为230px */
  gap: 0.5rem; /* 统一控制元素间距，替代margin-right */
  grid-auto-flow: dense; /* 自动填充布局空白，避免错位 */
}

.grid-item {
  border: 1px solid #ccc;
}

/* 每组第1个元素：占2列2行的双尺寸元素 */
.grid-item:nth-child(7n + 1) {
  grid-column: span 2;
  grid-row: span 2;
  background-color: red;
}

/* 每组第2-4个元素：放在第一行 */
.grid-item:nth-child(7n + 2),
.grid-item:nth-child(7n + 3),
.grid-item:nth-child(7n + 4) {
  grid-row: 1;
}

/* 每组第5-7个元素：放在第二行 */
.grid-item:nth-child(7n + 5),
.grid-item:nth-child(7n + 6),
.grid-item:nth-child(7n + 7) {
  grid-row: 2;
}

HTML（无需修改）

<div class="horizontal-scroll-container">
  <div class="grid">
    <div class="grid-item">Item 1</div>
    <div class="grid-item">Item 2</div>
    <div class="grid-item">Item 3</div>
    <div class="grid-item">Item 4</div>
    <div class="grid-item">Item 5</div>
    <div class="grid-item">Item 6</div>
    <div class="grid-item">Item 7</div>
    <div class="grid-item">Item 8</div>
    <div class="grid-item">Item 9</div>
    <div class="grid-item">Item 10</div>
    <div class="grid-item">Item 11</div>
    <div class="grid-item">Item 12</div>
    <div class="grid-item">Item 13</div>
    <div class="grid-item">Item 14</div>
  </div>
</div>

方案优势 #

• 无需拆分元素或嵌套多个Grid，即使API返回100+元素也能自动按7个一组重复布局
• 纯CSS实现，无需JS干预，性能更优
• 利用grid-auto-flow: dense自动填充布局空白，避免元素错位
• 统一使用gap控制间距，布局更规整

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