Skip to content

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

Notifications You must be signed in to change notification settings

mariohamann/bentogrid.js

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

58 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

BentoGrid.js

View documentation View on npm

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

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.

About

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

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published