Masonry style grid

Tom Wrench · 2023-11-24T08:05:25.678+00:00

Ok, here's a fun one. I'm having a play around to see how my front page would look like as a masonry style grid (similar to pinterest style).From what I've discovered, the parent div would have to be and then some javascript to span the grid items across rows, based on their content height.I haven't played with custom code *at all * yet, so I'm wondering if the following javascript code I found could be implemented. If so, any pointers? Or if there's a better way to implement a masonry style grid, I'm all ears (and eyes )

Tom Wrench
2 years ago
Ok, here's a fun one. I'm having a play around to see how my front page would look like as a masonry style grid (similar to pinterest style).

From what I've discovered, the parent div would have to be display: grid and then some javascript to span the grid items across rows, based on their content height.

I haven't played with custom code *at all * yet, so I'm wondering if the following javascript code I found could be implemented. If so, any pointers? Or if there's a better way to implement a masonry style grid, I'm all ears (and eyes 👀) 🙏

const resizeMasonryItem = (item) => {
/* Get the grid object and its row height */
const grid = document.getElementsByClassName('masonry-grid')[0];
const rowHeight = parseInt(window.getComputedStyle(grid).getPropertyValue('grid-auto-rows'));
const rowGap = parseInt(window.getComputedStyle(grid).getPropertyValue('grid-gap'));

/* Get the item content height */
const itemContent = item.querySelector('.masonry-content');
const rowSpan = Math.ceil((itemContent.getBoundingClientRect().height + rowGap) / (rowHeight + rowGap));

/* Set the spanning to the item */
item.style.gridRowEnd = 'span ' + rowSpan;
}

/* Resize all the grid items on load or resize */
const resizeAllMasonryItems = () => {
const allItems = document.querySelectorAll('.masonry-item');

for (let i = 0; i < allItems.length; i++) {
resizeMasonryItem(allItems[i]);
}
}

/* Events */
window.onload = resizeAllMasonryItems;
window.addEventListener('resize', resizeAllMasonryItems);
👏1
Lucas G
2 years ago
I don't think that code will work as is
Lucas G
2 years ago
a possible alternative
https://playground-shared_components.toddle.site/masonry
🔥1
🙏1
Tom Wrench
2 years ago
Amazing! Thanks @Lucas G for pointing this out and sharing an example. Great little javascript library there (for reference for others, learn about it here: http://macyjs.com/). Successfully implemented on my front page:
@Tom Wrench
Amazing! Thanks @Lucas G for pointing this out and sharing an example. Great little javascript library there (for reference for others, learn about it here: http://macyjs.com/). Successfully implemented on my front page:
Lucas G
2 years ago
I’m glad it could help! Just realizing that I didn’t link the editor link but only the front end, sorry about that.
The example loaded it thru an ESM module so nothing is needed in header. Recommended if you don’t want the script to block rendering though it is a very lightweight script
Lucas G
2 years ago
It is worth noting that CSS has masonry capabilities that can work for basic layouts

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Masonry_layout
@Lucas G
It is worth noting that CSS has masonry capabilities that can work for basic layouts

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Masonry_layout
Tom Wrench
2 years ago
Yeah I did actually look into that, but then saw browser compatibility is currently pretty much non-existent. So this javascript library is a great solution 🙏
Lucas G
2 years ago
Here is the code for the ESM import (no header script)

async function initMacy(args, ctx) {
const { default: Macy } = await import('https://cdn.jsdelivr.net/npm/macy/+esm');
var macyInstance = new Macy({
container: '.macy',
trueOrder: false,
waitForImages: false,
margin: 20,
columns: 5,
breakAt: {
940: 3,
520: 2,
400: 1
}
});
}

the Macy instance can be tweaked to the requirements
👌1

Masonry style grid

Tom Wrench

Lucas G

Lucas G

Tom Wrench

Lucas G

Lucas G

Tom Wrench

Lucas G