<p>This appears to be an example of the <a href="https://en.wikipedia.org/wiki/Bin_packing_problem" rel="nofollow noreferrer">bin packing problem</a>.</p>

<p>This isn't a particularly easy problem to solve and more precise fits are <a href="https://arxiv.org/ftp/arxiv/papers/1508/1508.01376.pdf" rel="nofollow noreferrer">likely to be  more complicated.</a></p>

<p>Below is a greedy algorithm that should solve your problem with a rough estimate. It's possible to get better matches but, as you do, you make things more complicated and computationally expensive.</p>

<p>This solution happens to be recursive and somewhat functional, but that's only my preference; it's probably possible to make a neater and less expensive algorithm if you're not interested in making the code functional or recursive.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>const matrixExample = [{
  size: 10,
  type: 'card'
}, {
  size: 4,
  type: 'card'
}, {
  size: 2,
  type: 'card'
}, {
  size: 11,
  type: 'card'
}, {
  size: 6,
  type: 'card'
}];

const sumCardList = cardList =&gt; cardList.reduce((prev, curr) =&gt; prev + curr.size, 0);

const packNextToBin = (cards, bins, max) =&gt; {
  if (cards.length === 0) {
    // there are no more cards to pack, use bins as is
    return bins;
  }
  
  // get the next card to pack into the bins
  const cardToPack = cards[0];
  
  // get the indices of bins which can still be filled
  const availableBinIndices = bins
    .map((bin, i) =&gt; ({sum: sumCardList(bin), index: i}))
    .filter(binData =&gt; binData.sum + cardToPack.size &lt; max)
    .map(binData =&gt; binData.index);
    
  // if there are no more bins which can fit this card, makea new bin  
  if (availableBinIndices.length === 0) {
    const updatedBins = [
      ...bins,
      [
        cardToPack
      ]
    ];
    
    return packNextToBin(
      cards.slice(1),
      updatedBins,
      max
    );
  }
  
  // get the first available bin which can accept the card
  const binToPack = availableBinIndices[0];
    
  // get a version of the matched bin with the new card added  
  const binWithInsertion = [
    ...bins[binToPack],
    cardToPack,
  ];
  
  // get the bins with the updated bin updated
  const updatedBins = bins
    .map((bin, i) =&gt; i === binToPack ?
      binWithInsertion :
      bin
    );
  
  // pack the next card into the bins
  return packNextToBin(
    cards.slice(1),
    updatedBins,
    max
  );
}

const results = packNextToBin(matrixExample, [[]], 12)

console.dir(results)</code></pre>
</div>
</div>
</p>
JavaScript: Organizing a Matrix By Best Fit
<p>How would one organize a dynamic matrix for best fit? So, let say you are attempting to always display the best fit for a display, and need to organize all cells so that there are no gaps between each item. Each item can either have a size from 1 - 12, and the max width of each row is 12. Using the example dataset, how can will dynamic sort and generate a new array that best fits the display? </p>

<pre><code>let matrixExample = [{
  size: 10,
  type: 'card'
}, {
  size: 4,
  type: 'card'
}, {
  size: 2,
  type: 'card'
}, {
  size: 11,
  type: 'card'
}, {
  size: 6,
  type: 'card'
}];


let endingResult = [
  [{
    size: 10,
    type: 'card'
  }, {
    size: 2,
    type: 'card'
  }],
  [{
    size: 4,
    type: 'card'
  }, {
    size: 6,
    type: 'card'
  }],
  [{
    size: 11,
    type: 'card'
  }]
];
</code></pre>

<p><strong>The user purpose of this?</strong>
When generating dynamic data to a UI, and the UI needs to optimize for component space.</p>