We're sorry but this page doesn't work properly without JavaScript enabled. Please enable it to continue.
Feedback

Building a Pinterest Clone

Formal Metadata

Title
Building a Pinterest Clone
Title of Series
Number of Parts
23
Author
License
CC Attribution 3.0 Unported:
You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal purpose as long as the work is attributed to the author in the manner specified by the author or licensor.
Identifiers
Publisher
Release Date
Language

Content Metadata

Subject Area
Genre
Abstract
One of the holy grails of responsive web layouts is the “Masonry” grid commonly used on Pinterest and many other sites. With the advent of native features like Flexbox and CSS Grid, many layout woes are a thing of the past. However, this design pinnacle still stands strong as a challenge to frontend engineers, often requiring a mess of complex JavaScript to manipulate the DOM successfully. Now, there’s a light at the end of the tunnel! Let’s explore how we can build a MasonryGrid component with nothing more than CSS Grid and Ember’s modifier pattern, making this problem a thing of the past.