EmberConf '21 - Building A Pinterest Clone With Modifiers & CSS Grid

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 component with nothing more than CSS Grid and Ember’s modifier pattern, making this problem a thing of the past.

Transcript

4. • • • • • •
7. weevil.news
8. • • • • • • •
9. kristianhammerstad.com
10. • • • •
11. • • • •
12. pinterest.com
14. • • • •
15. • • • • •
18. ember-photo-gallery.jhawk.co
22. • • •
25. • • •
26. • • • •
28. • •
30. • • •
32. • •
36. • •
40. ember-photo-gallery.jhawk.co
42. • • • • • • • • •