How to find empty space in js grid?

Question

Vue.js

There is such a panel with widgets. Used vue grid layout .
All widgets are different sizes.
The number of columns is 24. At the
top there are buttons that add widgets.
From the documentation, it is proposed to calculate the coordinates of the added widget as follows:

x: (this.selectedWidgets.length * 2) % (this.colNum || 12),
y: (this.selectedWidgets.length + (this.colNum || 12)),

This works if all the added widgets are the same size, but if they are different, it doesn't work and everything is very crooked.

And in general, it is necessary to form widgets from left to right, filling in empty spaces (if the widget fits there).

In other words, there is a grid, and you need to somehow calculate the coordinates so that the added widgets fill the entire grid.