如何制作具有水平溢出的 CSS 网格？

Question

我正在使用 CSS 网格构建一个 4 列布局。当浏览器的宽度达到特定断点（又名：移动设备）时，我希望将第一列固定在浏览器的左侧（X 轴。我目前正在使用 min-content 来确定该列的最大宽度是），然后将剩余的列滚动到下方。

您可以在亚马逊的移动比较功能中看到这种行为。向下滚动this page 到标有“比较眨眼相机”的部分。当您向左滑动时，您会看到第一列被锁定，其余产品在第一列下方滚动。）

我的代码结构是这样的（简化）：

.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr;
grid-column-gap: 5px;
grid-row-gap: 0px;
}

.item1 { grid-area: 1 / 1 / 2 / 2; background:yellowgreen;}
.item2 { grid-area: 1 / 2 / 2 / 3; background:#ddd }
.item3 { grid-area: 1 / 3 / 2 / 4; background:#ddd}

.item1,.item2,.item3 {padding: 1rem;}

<p>THIS IS THE DESCRIPTION OF THE PRODUCT FEATURE IN EACH COLUMN</p>
  
<div class="container">
  <div class="item1">FEATURE 1 : TO BE STICKY</div>
  <div class="item2">FEATURE 2 : Scrolls under #1</div>
  <div class="item3">FEATURE 3 : Scrolls under #1</div>
</div>

如何让第一列保持锁定状态而其他列向下滚动？

Answer 1

position:sticky 将在这里工作。

.grid{
  display:grid;
  grid-template-columns: 100px 1fr 1fr 1fr;
  width:400px;
  overflow-x:scroll;
}
.col{
  width:200px;
}
.left{
  position:sticky;
  left:0;
  z-index:999;
  background:lightgray;
}

  <div class="grid">
    <div class="left">
      Description
    </div>
    <div class = "col">
      Column 1
    </div>
    <div class = "col">
      Column 2
    </div>
    <div class = "col">
      Colunm 3
    </div>
  </div>