如何使行网格中的第一列固定，其他列可水平滚动

<div class="grid-container">
  <div class="grid-header">
    <div class="grid-cell">第一列</div>
    <div class="grid-cell">第二列</div>
    <div class="grid-cell">第三列</div>
    <!-- 其他列... -->
  </div>
  <div class="grid-body">
    <div class="grid-row">
      <div class="grid-cell">行1第一列</div>
      <div class="grid-cell">行1第二列</div>
      <div class="grid-cell">行1第三列</div>
      <!-- 其他列... -->
    </div>
    <!-- 其他行... -->
  </div>
</div>

.grid-container {
  overflow-x: auto;
}

.grid-header {
  display: flex;
  position: sticky;
  top: 0;
  background-color: #f5f5f5;
  z-index: 1;
}

.grid-cell {
  min-width: 100px;
  padding: 8px;
  border-bottom: 1px solid #ddd;
}

.grid-body {
  margin-top: -1px; /* 为了与表头对齐 */
}

.grid-row {
  display: flex;
}

.grid-row .grid-cell {
  border-bottom: 1px solid #ddd;
}

// 监听水平滚动事件，同步表头的滚动位置
var gridContainer = document.querySelector('.grid-container');
gridContainer.addEventListener('scroll', function() {
  var scrollLeft = gridContainer.scrollLeft;
  var gridHeader = document.querySelector('.grid-header');
  gridHeader.style.transform = 'translateX(' + -scrollLeft + 'px)';
});