如何在CSS和JS中创建可滚动/可接触的网格？

Question

我对如何用不确定的列和行制作网格感兴趣，这些列和行可以放入另一个Div中，而不会溢出到其他对象中或与父母大小混乱。

我希望它是正方形的，我正在使用尾风CSS，但我可以适应SCSS或Vanilla CSS。我也希望它在台式机上使用鼠标和触摸功能的设备可接触/可移动。

我将如何实现这一目标？

Answer 1

假设我已经正确理解了您的问题，这是您可以做到的一种方法。我没有使用触摸设备对其进行测试，但是也不难对其进行修改以响应触摸事件。

const items = [
  ['a0', 'a1', 'a2'],
  ['b0', 'b1', 'b2'],
  ['c0', 'c1', 'c2']
];

let html = '';
for (let rowItems of items) {
  html += '<div class="row">';
  for (let item of rowItems) {
    html += '<div class="item">';
    html +=   item;
    html += '</div>';
  }
  html += '</div>';
}

const viewElem = document.querySelector('#view');
const outputElem = document.querySelector('#output');
outputElem.innerHTML = html;



let mouseStartPos = null;
let startOffset = null;

outputElem.addEventListener('mousedown', e => {
  outputElem.classList.remove('animate');
  mouseStartPos = {
    x: e.clientX,
    y: e.clientY
  };
  startOffset = {
    x: outputElem.offsetLeft - viewElem.offsetLeft,
    y: outputElem.offsetTop - viewElem.offsetTop
  };
});

window.addEventListener('mouseup', e => {
  mouseStartPos = null;
  startOffset = null;

  outputElem.classList.add('animate');
  const xGridOffset = -1 * Math.max(0, Math.min(Math.round((outputElem.offsetLeft - viewElem.offsetLeft) / -100), items.length - 1));
  const yGridOffset = -1 * Math.max(0, Math.min(Math.round((outputElem.offsetTop - viewElem.offsetTop) / -100), items[0].length - 1));
  outputElem.style.left = `${xGridOffset * 100}px`;
  outputElem.style.top = `${yGridOffset * 100}px`;  
});

window.addEventListener('mousemove', e => {
  if (mouseStartPos) {
    const xOffset = mouseStartPos.x - e.clientX;
    const yOffset = mouseStartPos.y - e.clientY;
    outputElem.style.left = `${-1 * xOffset + startOffset.x}px`;
    outputElem.style.top = `${-1 * yOffset + startOffset.y}px`;
  }
});

#view {
  width: 100px;
  height: 100px;
  overflow: hidden;
  
  border: 2px solid blue;
}

#output {
  position: relative;
}

.row {
  display: flex;  
}

.item {
  display: flex;
  min-width: 100px;
  width: 100px;
  height: 100px;
  box-sizing: border-box;
  
  justify-content: center;
  align-items: center;
  border: 1px solid red;
}

#output.animate {
  transition: left 1s ease 0s, top 1s ease 0s;
}

Drag it!<br/>
<br/>
<div id="view">
  <div id="output"></div>
</div>