当 div 换行到新行以看起来像网格时，如何对齐要触摸的 div

Question

我在 React 中有一个板组件，它使用一个div 数组，我想将其包装成一个类似网格的地图。问题是，当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>
  );
}

用于磁贴和板的 CSS：

$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;
}

Answer 1

也许您可以在父元素上添加font-size: 0;和line-height: 0;。