How do I align divs to touch when they wrap to a new line to look like a grid

Question

I have a board component in React that uses an array of divs that I want to wrap into a grid-like map. The problem is, when the div wraps to a new line there is a big space in between each row. I want the divs to squish together, touching.

GameMap state:

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]
}

rendering the Grid:

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 for tiles and board:

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

Maybe you need `align-content: flex-start` on the container. https://stackoverflow.com/q/40890613/3597276 — Michael Benjamin, Jun 29 '17 at 17:49
align-content: flex-start did not work. In the container, line-height: 0 did work though — ChrisR, Jun 30 '17 at 02:59

score 1 · Accepted Answer · answered Jun 29 '17 at 17:13

1

Maybe you could add font-size: 0; and line-height: 0; on the parent element.

answered Jun 29 '17 at 17:13

Thomas L'huillier

175
10

How do I align divs to touch when they wrap to a new line to look like a grid

1 Answers1