Find Jobs
Hire Freelancers

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.
Projekt-ID: 30566392

Über das Projekt

5 Vorschläge
Remote Projekt
Aktiv vor 3 Jahren

Möchten Sie etwas Geld verdienen?

Vorteile einer Ausschreibung auf Freelancer

Legen Sie Ihr Budget und Ihren Zeitrahmen fest
Für Ihre Arbeit bezahlt werden
Skizzieren Sie Ihren Vorschlag
Sie können sich kostenlos anmelden und auf Aufträge bieten

Über den Kunden

Flagge von SPAIN
Ordino, Spain
0,0
0
Mitglied seit März 18, 2011

Kundenüberprüfung

Danke! Wir haben Ihnen per E-Mail einen Link geschickt, über den Sie Ihr kostenloses Guthaben anfordern können.
Beim Senden Ihrer E-Mail ist ein Fehler aufgetreten. Bitte versuchen Sie es erneut.
Registrierte Benutzer Veröffentlichte Jobs
Freelancer ® is a registered Trademark of Freelancer Technology Pty Limited (ACN 142 189 759)
Copyright © 2024 Freelancer Technology Pty Limited (ACN 142 189 759)
Vorschau wird geladen
Erlaubnis zur Geolokalisierung erteilt.
Ihre Anmeldesitzung ist abgelaufen und Sie wurden abgemeldet. Bitte melden Sie sich erneut an.