A simple, small, modern, dependency-free JavaScript bento box grid system.

Below you will find a working example of a Bento Grid, resize it to see it in action!
If you are looking for documentation checkout the github repo.

Item 0
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
Item 13

The above grid was created using this HTML:

            <div id="grid">
    <div class="item" data-min-width="5"  data-min-height="2">Item 0 </div>
    <div class="item" data-min-width="5"  data-min-height="3">Item 1 </div>
    <div class="item" data-min-width="6"  data-min-height="3">Item 2 </div>
    <div class="item" data-min-width="4"  data-min-height="3">Item 3 </div>
    <div class="item" data-min-width="5"  data-min-height="5">Item 4 </div>
    <div class="item" data-min-width="10" data-min-height="6">Item 5 </div>
    <div class="item" data-min-width="5"  data-min-height="5">Item 6 </div>
    <div class="item" data-min-width="3"  data-min-height="5">Item 7 </div>
    <div class="item" data-min-width="2"  data-min-height="2">Item 8 </div>
    <div class="item" data-min-width="3"  data-min-height="4">Item 9 </div>
    <div class="item" data-min-width="2"  data-min-height="4">Item 10</div>
    <div class="item" data-min-width="4"  data-min-height="3">Item 11</div>
    <div class="item" data-min-width="3"  data-min-height="3">Item 12</div>
    <div class="item" data-min-width="5"  data-min-height="3">Item 13</div>
</div>

and this bit of JavaScript:

            import Bento from '../dist/main.js';

const bentoOptions = {
    preferredCellSize: { x: 47, y: 33 },
};
                
const gridElement = document.querySelector('#grid');
const _bentoInstance = new Bento(gridElement, bentoOptions);