CSS Grid 强制前2个div堆叠、剩余元素实现overflow-x:auto横向滚动

架构老林

2026-10-6

解决方案

问题原因

你之前的实现将容器的grid-auto-flow设为column，所有子元素会被强制排在同一行，自然前两个标题元素也会参与横向滚动。

修正后CSS代码

@media (max-width: 767px) {
  .container {
    display: grid;
    grid-gap: 1.5rem;
    /* 拆分3行：前两行放标题、副标题，第三行放所有卡片 */
    grid-template-rows: auto auto 1fr;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* 可选：预留滚动条位置避免内容被遮挡 */
    padding-bottom: 1rem;
  }

  /* 前两个标题元素固定在左侧，不跟随滚动 */
  .container > div:nth-child(1),
  .container > div:nth-child(2) {
    width: 100%;
    position: sticky;
    left: 0;
    /* 替换为你的页面实际背景色，避免滚动时卡片内容透出 */
    background: #ffffff;
    z-index: 1;
  }

  /* 所有卡片强制放在第三行，固定宽度不收缩，自动横向排列 */
  .container .card {
    grid-row: 3;
    width: calc(100% - 3rem);
    flex-shrink: 0;
    align-items: center;
    display: block;
    justify-content: center;
  }
}