Cytoscape inconsistent spacing in a grid layout - cytoscape.js

Question

I'm using cytoscape to represent a DAG where nodes are grouped under compound nodes. The number of compound nodes is fixed (4). I want to make this graph entirely visible even for many nodes. This is possible in theory as the total width isn't large (4 cols) and the nodes inside the parents can be positioned vertically in rows.
For that I have been using a grid layout like that:
{
name: 'grid',
fit: false,
nodeDimensionsIncludeLabels: true,
condense: false,
avoidOverlap: true,
cols: 4,
position: function(node) {
let col, row;
if (node.classes().includes('a')) {
col = 0;
row = aRow++;
} else if (node.classes().includes('b')) {
col = 1;
row = bRow++;
} else if (node.classes().includes('c')) {
col = 2;
row = cRow++;
} else if (node.classes().includes('d')) {
col = 3;
row = 0;
}
return {row: row, col: col};
},
sort: function(l, r) {
return l.data('id').localeCompare(r.data('id'));
}
}
I set these attributes for the node css:
'height': 'label'
'width': 'label'
I'd expect the horizontal spacing between the parent components and the vertical spacing between nodes inside the same parent to be the same for different graphs. Unfortunately it doesn't seem to be the case.
The produced spacing for this larger graph looks ok:
However for this smaller graph I don't understand why those two parents nodes end up so close and why there is so much padding between the nodes:
Am I doing something wrong or the grid layout isn't suited for this?