Minimalist Grid Layout With Pure JavaScript – minigrid

Category: Javascript , Layout , Recommended | July 30, 2018
Author: henriquea
Views Total: 4,020
Official Page: Go to website
Last Update: July 30, 2018
License: MIT

Preview:

Minimalist Grid Layout With Pure JavaScript – minigrid

Description:

minigrid is a standalone JavaScript library used to generate a responsive, flexible, customizable grid layout for your next web design. Without the need of any 3rd dependencies like jQuery, etc.

Basic usage:

Import the core JavaScript file anywhere on your web page.

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

Add grid items into the grid layout.

<div class="grid">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  ...
  ...
  ...
</div>

The required CSS styles.

.grid {
  position: relative;
  ...
}

.grid-item {
  position: absolute;
  ...
}

Initialize the grid layout.

// minigrid(containerSelector, itemSelector, gutter, animate, done)
minigrid('.grid', '.grid-item', 6, null, 
  function(){
    // callback here
  }
);

Changelog:

07/30/2018

  • Remove overflow hidden from item

You Might Be Interested In:


Leave a Reply