Magic Grid
A simple, lightweight Javascript library for dynamic grid layouts.
Creating a dynamic grid layout has never been easier. With Magic Grid, all you have to do is specify a container and listen for changes. A few other configuration options are available for convenience but it's all very simple. Check it out live on JSFIDDLE. You can read about the implementation details on CodeBurst.
Note: Every item in the grid must have the same width.
Why not CSS Grid?
This question is addressed in the article:
Implementing a grid layout can quickly turn into a tricky task. If you have grid items that are always the same height, then you can probably make do with a Flexbox grid or some other CSS grid implementation. However, if you’re dealing with user-generated content, chances are, you don’t have the luxury of equal height components. One longer or shorter component would either stretch the other components in its row, or leave some unpleasant whitespace at the bottom of the row. All of a sudden, our beloved CSS grid has become insufficient.
Check out CSS Grid AMA's issue #19 for a response from CSS expert @rachelandrew:
That's not something grid is designed for. Grid is two dimensional so you are always working in both rows and columns at the same time. You can't use grid to do a "masonry" style layout like that. You could place items in that way if you had a lot of rows and managed how many each spanned, but you can't use auto-placement to get that kind of layout.
Ports
Getting Started
Step 1
Get Magic Grid via NPM:
npm install magic-grid
Or CDN
<script src="https://unpkg.com/magic-grid/dist/magic-grid.cjs.js"></script>
<script src="https://unpkg.com/magic-grid/dist/magic-grid.min.js"></script>
Step 2 (skip if using CDN)
Import Magic Grid:
import MagicGrid from "magic-grid"
let MagicGrid = require("magic-grid");
You can also pull Magic Grid directly into your html
<script src="node_modules/magic-grid/dist/magic-grid.min.js"></script>
Step 3
You're good to go! If you used a script tag, the library can be referenced via the global variable, MagicGrid.
let magicGrid = new MagicGrid(...);
magicGrid.listen();
Usage
Static content:
If your container doesn't have any dynamically loaded content i.e., all its child elements are always in the DOM, you should initialize the grid this way:
let magicGrid = new MagicGrid({
container: "#container",
static: true,
animate: true,
});
magicGrid.listen();
Dynamic content:
If the container relies on data from an api, or experiences a delay, for whatever reason, before it can render its content in the DOM, you need to let the grid know the number of items to expect:
let magicGrid = new MagicGrid({
container: "#container",
items: 20,
animate: true,
});
magicGrid.listen();
API
MagicGrid(config)
config (required): Configuration object
The MagicGrid constructor. Initializes the grid with a configuration object.
let magicGrid = new MagicGrid({
container: "#container",
static: false,
items: 30,
gutter: 30,
maxColumns: 5,
useMin: true,
useTransform: true,
animate: true,
center: true,
});
.listen()
Positions the items and listens for changes to the window size. All items are repositioned whenever the window is resized.
let magicGrid = new MagicGrid({
container: "#container",
static: true,
animate: true,
});
magicGrid.listen();
Magic grid will also listen for changes in container size
---
.positionItems()
This function is useful in cases where you have to manually trigger a repositioning; for instance, if a new element is added to the container.
let magicGrid = new MagicGrid({
container: "#container",
items: 30,
animate: true,
});
magicGrid.listen();
magicGrid.positionItems();
.onPositionComplete(callback)
Adds a listener used execute a function once all items in the grid have been properly positioned.
const magicGrid = new MagicGrid({
container: '.container',
animate: true,
static: true,
});
const id = magicGrid.onPositionComplete(() => {
console.log("Grid Has Been Resized");
});
magicGrid.listen();
.removeListener(id)
Allows the removal of any listener by its unique ID.
const magicGrid = new MagicGrid({
container: '.container',
animate: true,
static: true,
});
const id = magicGrid.onPositionComplete(() => {
console.log("Grid Has Been Resized");
magicGrid.removeListener(id);
});
magicGrid.listen();