azqvwznme=ldglc

Make Live Diamond Grids With Ease!

Quickly and easily generate diamond grids, of any shape or size, from your already-existing content! Simply add the data-diamond-group="" attribute to any existent element, call Live Diamond Grid, and the rest is handled for you.

The best part is it's LIVE! This means that any effects you want, any text that needs to be added, any interaction that you'd like inside your diamonds is just as easy as any old box! The days of photoshopping images and text into a diamond shape (ew! Never use an image for text!), just for the aesthetic, with no functionality, are now far behind us. Try hovering over the diamonds to see the content respond.

Eliminates the Struggle

No more struggling with complicated calculations, hacks for responsiveness, or the agony of needing to re-do it all when your client says they'd like the diamonds just a little taller, with a bit more spacing, or with an even number of tiles in the first row. Just change a couple easy values, and you're good to go. 

var myDiamonds = new LiveDiamondGrid({
    'width'              : 150,
    'height'             : 100,
    'data-diamond-group' : 'group-two',
    'first-row-odd'      : true,
    'gap'                : 5
});

var myDiamonds = new LiveDiamondGrid({
    'width'              : 150,
    'height'             : 130,
    'data-diamond-group' : 'group-two',
    'first-row-odd'      : false,
    'gap'                : 35
});

Easily Responsive

Whenever the browser is loaded or resized, Live Diamond Grid checks if the grid needs to be reflowed. The parent div that Live Diamond Grid populates will always have a class of .ldg-{your-group-name}-item-container, you can easily use CSS to constrain the width, or give it a percentage width, so it knows when it can be reflowed.

The following Live Diamond Grid has a width of 100%, with a min-width of 790px. To see the responsiveness in action, try resizing your browser.

Buy Now Documentation