Dynamic Grid Layout Generator – Magic Grid

Category: Javascript , Layout , Recommended | March 3, 2019
Author:e-oj
Views Total:5,217 views
Official Page:Go to website
Last Update:March 3, 2019
License:MIT

Preview:

Dynamic Grid Layout Generator – Magic Grid

Description:

Magic Grid is a lightweight (3kb minified) JavaScript library to generate a dynamic, flexible grid layout using pure JavaScript.

How to use it:

Install & download.

# NPM
$ npm install magic-grid --save

Load the minified version of the Magic Grid library in the html document.

<script src="/dist/magic-grid.umd.js"></script>

Create a container to place the grid layout.

<div class="container">
  
</div>

Create a dynamic grid layout and specify the number of grid items to generate.

let magicGrid = new MagicGrid({
    container: "#container",
    items: 20
});
magicGrid.listen();

Create a static grid layout from existing grid items.

<div class="container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
  <div class="item7">7</div>
  <div class="item8">8</div>
  <div class="item9">9</div>
  <div class="item10">10</div>
</div>
let magicGrid = new MagicGrid({
    static: true
});
magicGrid.listen();

Set the space between grid items. Default: 25px.

let magicGrid = new MagicGrid({
    gutter: 30
})

Set the maximum number of grid items.

let magicGrid = new MagicGrid({
    maxColumns: 100
})

Decide whether to append next element to the shortest column.

let magicGrid = new MagicGrid({
    useMin: false
})

Enable/disable the animation when changing screen size.

let magicGrid = new MagicGrid({
    animate: false
})

Trigger a repositioning function after new grid items added to the grid layout.

magicGrid.positionItems();

Changelog:

v3.2.3 (03/03/2019)

  • Update

v3.2.2 (01/21/2019)

  • Allow 0 gutter

v3.2.0 (01/17/2019)

  • Position with translate

v3.1.5 (01/16/2019)

  • Position with translate

v3.1.4 (01/15/2019)

  • get container in getReady function

v3.1.2 (12/27/2018)

  • refactor

v3.1.1 (12/27/2018)

  • Save column width in setup and positionItems.

v3.1.0 (12/25/2018)

  • refactor

v3.0.10 (12/25/2018)

  • Throttle window listener. Removed getMax function.

v3.0.8 (11/21/2018)

  • modified ready check

11/18/2018

  • no top gutter on first row

11/17/2018

  • stretch container to grid height

11/15/2018

  • Refactor

You Might Be Interested In:


Leave a Reply