BentoGrid.js

Installation

HTML

<script type="module">
	import BentoGrid from "https://cdn.jsdelivr.net/npm/@bentogrid/core@1.1.1/BentoGrid.min.js";
</script>

npm

npm i @bentogrid/core

import BentoGrid from "@bentogrid/core";

Basic Usage

<div class="bentogrid">
	<div data-bento="1x1"></div>
	<div data-bento="2x2"></div>
	<div data-bento="2x1"></div>
	<!-- Add elements or fillers -->
</div>

const myBento = new BentoGrid({
	// Add configuration options
});

Elements vs. Fillers

Elements

• Elements are the items that you want to display in your grid.
• Elements are defined by having the attribute data-bento="2x3".
• Hidden Elements are ignored.

Fillers

• Fillers are placeholders that are used to fill the empty space in your grid.
• Set Fillers by omitting the attribute. They are automatically cloned in a loop.
• If you don't set Fillers, empty divs will be created.
• Fillers get the class .bento-filler when they are visible.
• Fillers grow as big as possible.

Example 1: Unstyled Fillers

#bentogrid > *[data-bento] {
  @apply bg-sand-200;
}

Example 2: Styled Fillers

#bentogrid > * {
  @apply bg-sand-200;
}
#bentogrid .bento-filler {
  @apply bg-black;
}

Example 3: Individual Fillers (automatically looped)

<div id='bentogrid'>
  <div data-bento='2x2'></div>
  ...
  <div class='bg-water-300'></div>
  <div class='bg-water-600'></div>
  <div class='bg-water-900'></div>
</div>

UserConfig

target

• Description: The target element to apply the grid to.
• Type:string | HTMLElement
• Default: '.bentogrid'

cellGap

• Description: The space between each cell in the grid.
• Type:number
• Default: 0

aspectRatio

• Description: The aspect ratio of each cell in the grid.
• Type:number
• Default: 1/1

balanceFillers

• Description: Whether to balance the position of the fillers. If set, they change their position with other elements.
• Type:boolean

minCellWidth

• Description: The minimum width of each cell in the grid.
• Type:number
• Default: 100

columns

• Description: The number of columns to use for the grid. This overrides minCellWidth.
• Type:number

breakpoints

• Description: Breakpoints to set responsive grid behavior. minWidth looks at breakpointReference.
• Type:Object.<number, Breakpoint>

breakpointReference

• Description: Select if the breakpoints should reference to the target's or the window's width.
• Type:string
• Default: 'target'

Breakpoint

cellGap

• Description: The space between each cell in the grid.
• Type:number

aspectRatio

• Description: The aspect ratio of each cell in the grid.
• Type:number

minCellWidth

• Description: The minimum width of each cell in the grid.
• Type:number

columns

• Description: The number of columns to use for the grid. This overrides minCellWidth.
• Type:number

Hint: Further documentation is coming soon.