ionic 3 auto adjust layout on the grid

Question

I have built a dashboard using ion-grid and just one ion-row. the ion-row contains 10-12 ion-col. So basically, as soon as the screen width is hit the columns starts to flow down.

This all is good and as expected. However, the problem starts when these columns are of varying width and heights. I have defined the col of 3 width types: 200px, 400px and 600px. The height is also of 3 variations 200px, 400px and 600px. So overall each col can be either a 1*1, 2*1, 1*2, 2*2, 3*1 and 3*2 size.

I am using dragula to be able to drag and drop the titles to adjust the layout as desired. However, initial layout always renders with some holes though they can be filled by manual drag drop.

So, what should be the right way to handle it at the initial time to avoid the holes in the layout.

Answer 1

You probably could use css flex grow. Use one parent div for each row and set css as

.row {
  display: flex;
  justify-content: center;
  align-items: center
}

for each column use flex grow to define their sizes.

eg. flex-grow: 1 - for normal, flex-grow: 2 for bigger width.

here I have attached what I have did. In my case, the column numbers should be dynamic, but having the same with.