BentoGrid.js

A smart library that automatically positions elements depending on their size in a grid to create responsive and beautiful layouts.

• 🔧 Flexible: Easily set the size of elements via attributes
• 🧠 Smart: Automatic positioning of elements in the grid
• 🌐 Lightweight: Only 2KB (minified) with zero dependencies
• 📱 Responsive: Adaptive grid layouts for various screen sizes
• 🎨 Inspired by Apple's marketing slides and bento.me

Note The following documentation is automatically generated from the source code and just includes the API. For installation, usage and examples check out these hand-crafted docs.

Classes

BentoGrid

Typedefs

UserConfig : Object

Breakpoint : Object

BentoGrid

Kind: global class

• BentoGrid
  • new BentoGrid(userConfig)
  • .recalculate()

new BentoGrid(userConfig)

Create a new BentoGrid instance.

Param	Type	Description
userConfig	UserConfig	User configuration for the grid.

bentoGrid.recalculate()

Recalculate the grid layout. Useful for cases when elements are added, removed, or visibility changes.

Kind: instance method of BentoGrid

UserConfig : Object

Kind: global typedef
Properties

Name	Type	Default	Description
[target]	string | HTMLElement	'.bentogrid'	The target element to apply the grid to.
[minCellWidth]	number	100	The minimum width of each cell in the grid.
[columns]	number	The number of columns to use for the grid. This overrides minCellWidth.
[cellGap]	number	0	The space between each cell in the grid.
[aspectRatio]	number	1/1	The aspect ratio of each cell in the grid.
[breakpoints]	Object.<number, Breakpoint>	Breakpoints to set responsive grid behavior. minWidth looks at breakpointReference.
[breakpointReference]	string	'target'	Select if the breakpoints should reference to the target's or the window's width.
[balanceFillers]	boolean	false	Whether to balance the position of the fillers. If set, they change their position with other elements.

Breakpoint : Object

Kind: global typedef
Properties

Name	Type	Description
[minCellWidth]	number	The minimum width of each cell in the grid.
[cellGap]	number	The space between each cell in the grid.
[columns]	number	The number of columns to use for the grid. This overrides minCellWidth.
[aspectRatio]	number	The aspect ratio of each cell in the grid.