Minimalist Grid Layout With Pure JavaScript – minigrid

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