css - CSS Grid：强制前 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%;
  }
}

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

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

谢谢！

标签： csslayoutcss-grid

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>