Creating a polyfill for masonry
Now that we’ve created our first polyfill, we can also use the same approach to create a polyfill for masonry. However, we won’t be able to recreate the full functionality of the feature, since it involves reordering elements within the grid, especially when used for grid-template-columns.
Nevertheless, we’ll create a polyfill that can be used with grid-template-rows that aligns all elements given in a masonry layout.
Understanding how masonry is meant to work
Masonry layouts work well with content of unknown sizes. As a famous example, Pinterest uses a masonry layout to align images of differing heights, as shown in the following figure.
Figure 7.3 – A masonry layout that can be found on Pinterest
We see various images on Pinterest’s Celebrating women in every era everywhere page. They all have equal widths but differing heights, but the space between the images doesn’t...
