SOURCE

// /*
// layout(3, 3, [
//   {
//     id: 1,
//     style: {
//       gridColumnStart: 'span 2'
//     }
//   },
//   {
//     id: 2,
//     style: {
//       gridColumnStart: 'span 2'
//     }
//   },
//   {
//     id: 3
//   },
//   {
//     id: 4
//   },
//   {
//     id: 5
//   }
// ])
// /**
//  [
//   [1, 1, 3],
//   [2, 2, 4], 
//   [5, 0, 0]
//  ]
//  */
// layout(3, 3, [
//   {
//     id: 1,
//     style: {
//       gridColumnStart: 'span 2',
//       gridRowStart: 2
//     }
//   },
//   {
//     id: 2,
//     style: {
//       gridColumnStart: 2,
//       gridColumnEnd: 'span 2'
//     }
//   },
//   {
//     id: 3
//   },
//   {
//     id: 4
//   },
//   {
//     id: 5
//   }
// ])
// /**
//  [
//   [3, 2, 2],
//   [1, 1, 4], 
//   [5, 0, 0]
//  ]
//  */


const layout = function(rows,cols,items) {
    if(!Array.isArray(items)) return [];

    const enriched = items.map((item,index) => {
        const style = item.style || {};

        let row = style.gridRowStart;
        let col = style.gridColumnStart;

        if(row === undefined || col === undefined) {
            const defaultRow = Math.floor(index / cols) + 1;
            const defaultCol = (index % cols) + 1;

            row = row || defaultRow;
            col = col || defaultCol;
        };

        return {
            id:item.id,
            style:{...style},
            _sortRow:Number(row),
            _sortCol:Number(col),
        };
    });

    enriched.sort((a,b) => {
        if(a._sortRow !== b._sortRow) {
            return a._sortRow - b._sortRow;
        }

        return a._sortCol - b._sortCol;
    });

    
}