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 custom Fillers by omitting the data-bento 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 so you can style them individually.
• Fillers grow as big as possible.

Example 1: Unstyled Fillers

In this example fillers are automatically created, but they are not styled and therefore invisible.

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

Example 2: Styled Fillers

In this example, fillers are automatically created and styled via CSS.

#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'

In this example the element with the ID `bentogrid-config-target` is targeted to initialize BentoGrid.

new BentoGrid({
  target: "#bentogrid-config-target",
  cellGap: 6,
  columns: 8,
  aspectRatio: 1,
});

As an alternative you can also pass the element directly to the `target` option.

new BentoGrid({
  target: document.getElementById("bentogrid-config-target-element"),
  cellGap: 6,
  columns: 8,
  aspectRatio: 1,
});

cellGap

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

In this example the cellGap is set to 24.

new BentoGrid({
  cellGap: 24,
  target: "#bentogrid-config-cell-gap",
  columns: 8,
  aspectRatio: 1,
});

aspectRatio

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

In this example the cellGap is set to 9 / 16, which means that a single cell in the grid has a ratio of 9 / 16. An element taking up 2 columns and 1 row will have a ratio of about 18 / 16.

new BentoGrid({
  aspectRatio: 9 / 16,
  cellGap: 6,
  target: "#bentogrid-config-aspect-ratio,
  columns: 8,
});

balanceFillers

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

new BentoGrid({
  balanceFillers: true,
  cellGap: 6,
  target: "#bentogrid-config-balance-fillers,
  aspectRatio: 1,
  columns: 8,
});

minCellWidth

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

new BentoGrid({
  minCellWidth: 50,
  balanceFillers: true,
  cellGap: 6,
  target: "#bentogrid-config-min-cell-width,
  aspectRatio: 1
});

columns

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

new BentoGrid({
  columns: 5,
  balanceFillers: true,
  cellGap: 6,
  target: "#bentogrid-config-columns,
  aspectRatio: 1,
});

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.