Grid Wall

Straightforward package that will simply create a wall like grid moving its children it the higher position available. It tracks new children and if their height change and flow accordingly.

Features

• Lightweight (~5KB minified)
• Tracks new children
• Tracks changes in children dimensions
• Custom transitions
• Auto handle resize
• Plug and play

Installing

Import as a module

npm install --save @federico.moretti/grid-wall
# or
yarn add @federico.moretti/grid-wall

or directly in the html:

<script src="grid-wall.min.js"></script>

Example

Basic usage:

const grid = document.querySelector('.grid');
const gridWall = new GridWall({
  container: grid,
  childrenWidthInPx: 100,
});

API

new GridWall(params: object)

Initialize the module.

| Parameter | Type | Description | | --------------------- | ----------------------- | --------------------------------------------------------- | | container | HTMLElement | html element | | childrenWidthInPx | number | children width in px | | enableResize | boolean | it will track resize event and adapt the container width | | resizeDebounceInMs | number | debounce the resize event, default is 100ms | | margin | center | left | right | it will place the remaining space in the position defined | | insertStyle | CSSStyleDeclaration | style of a child when added to the container | | beforeStyle | CSSStyleDeclaration | style of a child before the first reflow | | afterStyle | CSSStyleDeclaration | style of a child after the first reflow |

resize(containerWidthInPx: number): void

Resize container width the reflow the children.

How to use the style properties

The children will fade in when added, but then will transition when moved.

new GridWall({
  container: element,
  childrenWidthInPx: 200,
  insertStyle: {
    opacity: '0',
    transition: 'opacity 0.2s ease-in, transform 0s ease-in',
  },
  beforeStyle: {
    opacity: '1',
  },
  afterStyle: {
    transition: 'opacity 0.2s ease-in, transform 0.2s ease-in',
  },
});

The children will transition to position also when added.

new GridWall({
  container: element,
  childrenWidthInPx: 200,
  insertStyle: {
    transition: 'transform 0.2s ease-in',
  },
  afterStyle: {
    transition: 'transform 0.2s ease-in',
  },
});

Licence

MIT © Federico Moretti