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

Question

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

您可以在 Amazon 的移动比较功能 中看到此行为。向下滚动 this page 到标有“比较 Blink 相机”的部分。您会看到第一列已锁定，当您向左滑动时，其余产品会滚动到第一列下方。）

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

.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>

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

How do make a CSS grid with horizontal overflow?

html

css

css-grid