Compact Cascading Grid Layout In JavaScript – pkmx

Category: Javascript , Layout | June 10, 2017
Views Total:330 views
Official Page:Go to website
Last Update:June 10, 2017


Compact Cascading Grid Layout In JavaScript – pkmx


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>

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

You Might Be Interested In:

Leave a Reply