CSS 网格：强制前 2 个 DIV 堆叠而不是溢出-x：像其余的一样自动

Question

所以我遇到的大问题是，我无法控制 HTML，只能控制 CSS。

我目前拥有的是一个 css-grid 容器，里面有 6 个 div。我希望前 2 个项目堆叠 100% 的宽度，然后剩余的 overflow-x: auto 所以在移动设备上你可以在它们上从左向右滚动。

滚动部分我已经做好了，但前两项也可以滚动，它们不是卡片，所以我想避免这种情况。

所以我只针对移动屏幕，但我目前拥有的是：

我的HTML（我无法更改）

<div style="container">
  <div>Title</div>
  <div>Sub-title</div>

  <div class="card">CARD 1</div>
  <div class="card">CARD 2</div>
  <div class="card">CARD 3</div>
  <div class="card">CARD 4</div>
</div>

我的CSS

@media (max-width: 767px) {
  .container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    display: grid;
    grid-gap: 1.5rem;
    grid-auto-flow: column;
    grid-auto-columns: calc(100% - 3rem);
 }

 .container .card {
    align-items: center;
    display: block;
    justify-content: center;
    width: 100%;
  }
}

希望这张图片展示了我所追求的。

如有任何帮助，我们将不胜感激，或者即使您可以让我知道是否可行。

谢谢！

Answer 1

将卡片移到自己的行中，并用position:sticky

制作另一行

.container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  display: grid;
  grid-gap: 1.5rem;
  grid-auto-flow: column;
  grid-auto-columns: calc(100% - 3rem);
}

.container .card {
  align-items: center;
  display: block;
  justify-content: center;
  width: 100%;
  height:50px;
  background:red;
  grid-row:3; /* added */
}

/* added */
.container :not(.card) {
  position:sticky;
  left:0;
}

<div class="container">
  <div>Title</div>
  <div>Sub-title</div>

  <div class="card">CARD 1</div>
  <div class="card">CARD 2</div>
  <div class="card">CARD 3</div>
  <div class="card">CARD 4</div>
</div>

CSS 网格：强制前 2 个 DIV 堆叠而不是溢出-x：像其余的一样自动

CSS Grid: Force first 2 DIVs to stack and not overflow-x: auto like the remaining ones

css

layout

css-grid