Multi-cell components in GridLayout

Hi,
I have a GridLayout in which I add CssLayout components. The size of the child components vary, but only in terms of the number of cell they occupy in the grid and the size is specified using css styles for each child variation. My intention is to have fixed size cells of the grid.

The problem i face is that the cells expand in strange fashion only in some particular combinations of component placements. I’m adding two images which show the issue in detail. I have highlighted the v-gridlayout-slot element in a different color to show the places where the expansions have occured. I have set columnExpandRatio for all columns to 0 and rowExpandRatio for all rows to 0.

  • The entire grid is set to sizeUnspecified.
  • Individual components have width and height set via css. 2x2 size takes account of the spacing in between components.
  • The grid uses a default alignment of MIDDLE_CENTER. Changing the alignment only affects where the extra space appears around the child components.
  • I add empty components of 1x1 in places where there are no actual child components to insert. Without this the expansion problem only seem to get worse.

Does the slot expansion calculation account for multicell components?
24402.png
24403.png

SOLUTION:

  • Make the GridLayout width & height fixed based on what size of each cell should be.
  • Set size of child components to 100%, so that they can fill the cell.
  • Disable all column and row expansion.

Trust GridLayout to calculate size of individual cells.