Javascript 当div缠绕到一条新线以看起来像网格时，如何对齐要触摸的div

我在React中有一个板组件，它使用一个div数组，我想将其包装成一个类似网格的映射。问题是，当div换行到新行时，每行之间都有一个很大的空间。我想让两个演员挤在一起，互相抚摸

游戏地图状态：

this.state = {
  gameMap: [1,1,1,1,1,1,1,1,1,1,1,1,1,1,
            1,1,1,1,1,1,1,1,1,1,1,1,1,1,
            1,1,1,1,1,1,1,1,1,1,1,1,1,1,
            1,1,1,1,1,1,1,1,1,1,1,1,1,1,
            1,1,1,1,1,1,1,1,1,1,1,1,1,1,
            1,1,1,1,1,1,1,1,1,1,1,1,1,1,
            1,1,1,1,1,1,1,1,1,1,1,1,1,1]
}

渲染网格：

const MapView = ({gameMap, rows, cols}) => {
const style = {
    'width': 140,
  };

  return (
    <div style={style}>
      {gameMap.map((tile, i) => {
        return (
          <div
            key={i}
            className={tile === 'player' ? 'player' : 'floor'}
          />
        )
      })}
    </div>
  );
}

---

也许您可以添加

字体大小：0和
行高：0。
可能需要容器上的
align content:flex start
。另请参见此处：对齐内容：flex start不起作用。但在容器中，行高度0确实起作用
$cell-size: .6em;

.tile {
  display: inline-flex;
  flex-wrap: wrap;
  height: $cell-size;
  width: $cell-size;
  border-style: solid;
  border-width: 1px;
  box-sizing: border-box;
}

.player {
  @extend .tile;
  background-color: red;
}

.wall {
  @extend .tile;
  background-color: black;
}

.floor {
  @extend .tile;
  background-color: white;
}