CSS grid display issues in Sugarcube

Authoring Twine
1

Twine Version: 2.6.2
Sugarcube Version: 2.36.1

Hi there, I’m working on a tiled minimap using CSS grid, and I’m having trouble getting it to display properly. The tiles are properties in a 2D array of objects called $mapArray, and I’m using loops to create them as grid items. This part’s working and the tiles do display in a 6x6 grid, but instead of fitting seamlessly together, they’re bunched up and overlapping. The tile image file is 16x16px exactly. I made an identical grid with pure HTML and CSS and it displays perfectly, so I’m assuming this is something to do with Sugarcube’s CSS? I don’t know which properties to try modifying other than padding, margins and gaps.

Here’s the HTML:

<div class="mapGrid"><<for _i = 0; _i < $mapArray.length; _i++>><<for _j = 0; _j < $mapArray[_i].length; _j++>><div class="mapSquare">[img[$mapArray[_i][_j].tile]]</div><</for>><</for>></div>

Here’s the CSS:

.mapGrid {
  	height: 96px;
  	width: 96px;
	display: grid;
  	grid-template-columns: 16px 16px 16px 16px 16px 16px;
  	grid-template-rows: 16px 16px 16px 16px 16px 16px;
	column-gap: 0;
  	row-gap: 0;
 }

.mapSquare {
	height: 16px;
  	width: 16px;
  	background-color: #000011
}

Any help is appreciated. :slight_smile:

2

Looks like the line height is pushing them down? Adding line-height: 0; to the .mapGrid style fixes it for me…

1 Like
3

That’s fixed it, thank you!