grid布局实现两列元素任意拖动

要实现两列元素任意拖动，可以使用CSS Grid的`grid-template-columns`属性和JavaScript的`mousedown`、`mousemove`和`mouseup`事件。

以下是一个简单的示例，其中左侧列宽度可以通过拖动分隔符来调整：

HTML：

<div class="grid-container">
  <div class="left-column"></div>
  <div class="right-column"></div>
  <div class="resizer"></div>
</div>

CSS：

.grid-container {
  display: grid;
  grid-template-columns: 1fr auto; /* 左右两列 */
  grid-gap: 15px;
  height: 400px;
  position: relative;
}

.left-column {
  background-color: #ccc;
}

.right-column {
  background-color: #eee;
}

.resizer {
  width: 10px;
  height: 100%;
  position: absolute;
  right: -5px;
  top: 0;
  cursor: col-resize;
}

JavaScript：

const resizer = document.querySelector('.resizer');
const leftColumn = document.querySelector('.left-column');
const rightColumn = document.querySelector('.right-column');
let isResizing = false;

resizer.addEventListener('mousedown', function(e) {
  isResizing = true;
});

document.addEventListener('mousemove', function(e) {
  if (!isResizing) return;

  const containerRect = document.querySelector('.grid-container').getBoundingClientRect();
  const containerLeft = containerRect.left;
  const containerWidth = containerRect.width;

  const newWidth = e.clientX - containerLeft;

  leftColumn.style.width = newWidth + 'px';
  rightColumn.style.width = containerWidth - newWidth + 'px';
});

document.addEventListener('mouseup', function(e) {
  isResizing = false;
});

在上面的代码中，我们首先获取分隔符元素、左列元素和右列元素。然后，我们添加`mousedown`事件侦听器来检测分隔符是否已按下。接下来，我们添加`mousemove`事件侦听器来检测鼠标是否正在移动，如果是，则计算新的左列宽度，并相应地更新左列和右列的宽度。最后，我们添加一个`mouseup`事件侦听器来检测分隔符是否已释放。

通过这种方法，我们可以实现两列元素的任意拖动，并且它们的宽度可以动态地调整。