I have a grid set up like this in a JSX element:

<div className={"board"}>
    {board.tiles.map((tile, index) => (
        <TileView
            key={index}
            value={tile.value}
            onClick={() => board.onTileClick(index)}
        />
    ))}
</div>

CSS:

.board {
    aspect-ratio: 1 / 1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.25rem;
    border-radius: 0.25rem;
    border-width: 2px;
    border-style: solid;
}

Then, the TileView JSX element is:

return (
    <div
        onClick={onClick}
    >
        {value === 0 ? (
            <div
                className={"empty-tile"}
            ></div>
        ) : (
            <div
                className={"tile"}
                style={{userSelect: "none"}}
            >{value}</div>
        )}
    </div>
)

CSS:

.tile {
    align-content: center;
    border-radius: 0.25rem;
    border-width: 4px;
    border-style: solid;
    font-family: monospace;
    font-size: 3.75rem;
    line-height: 1;
    text-align: center;
    width: 100%;
    height: 100%;
    user-select: none;
}

.empty-tile {
    border-radius: 0.25rem;
    border-width: 2px;
    border-style: solid;
}

The tile is initially in an empty state, so shows the styled empty div.

Then, when I click on the tile, it shows the “normal” tile.

Now, when I do this, the normal tile increases the height of the TileView in the grid. When I add some text to the empty div, and click on the tile, the normal tile no longer changes the height of the TileView. So, the issue seems to be this empty div in this conditional rendering.

I have been messing with the CSS to no avail.

Any help will be greatly appreciated.