Pinterest like images grid (single page) No JS, Perfect Cumulative Layout Shift (CLS) score required
$30-250 USD
In Bearbeitung
Veröffentlicht vor fast 3 Jahren
$30-250 USD
Bezahlt bei Lieferung
I need a HTML/CSS only image grid like shown here: [login to view URL]
I don't want to use masonry or other JavaScript lib, as this moves the images around after the page has been loaded, causing a bad Google Cumulative Layout Shift (CLS) rating. Pinterest seems to solve this issue without JavaScript.
I know the height and width of each image, so when rending the grid via PHP we can use that information to "build" the right html.
It's important that images render from left to right. Not down.
All images have a fixed width, and variable height. But both values are known in advance.
I currently use masonry to render this grid, but I want to move away from this to achieve a perfect Cumulative Layout Shift (CLS) rating. On resize of the page, the columns should re-adjust.
I just need a single page HTML/CSS, I will then implement it on my website myself.