My React board component consists of an array of divs that I want to arrange in a grid-like map. The issue is, when the div wraps to a new line, there is significant space between each row. I aim to have the divs close together with no gaps.
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;
}