Compact Cascading Grid Layout In JavaScript – pkmx

Preview:

Description:

pkmx is a tiny, flexible, dependency-free JavaScript library used for creating a compact cascading grid layout without any space between cells.

Basic usage:

Let’s say you have a group of items to be arranged in the grid layout.

<div id="example">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
  <div class="item">Item 5</div>
  ...
</div>

Download and put the JavaScript file at the end of the document so the pages load faster.

<script src="pkmx.js"></script>

Initialize the plugin and specify the selectors of container & item elements.

pkmx('#sample', '#sample .item');

Customize the grid layout by passing the following option object as the third parameter to the ‘pkmx’ instance.

{
  cellWidth: number,
  cellHeight: number,
  cellHorizontalAlign: left |center | right
  cellVerticalAlign: top | middle | bottom
  optimize: larger-first |
  liveAppend: boolean
  manageContainerHeight: boolean
}