Creating a tiled layout

In a tiled layout, or a masonry layout, HTML elements are fit together like bricks in a wall rather than the strict grid layouts we can create with just CSS. With CSS, we're limited to layouts as shown in the following figure:

This is a perfectly acceptable way to lay out our content; our site visitors can view all of the content without a problem. However, if we add JavaScript to the mix, we can improve those layouts a bit by making them fit together as shown in the following figure:

Tiled layouts or masonry layouts can help to close up gaps left by items of different heights. Tiled layouts are great for situations where our site visitors are browsing through lots of graphical content—such as a photo gallery. They're less ideal for situations where site visitors might be looking for something specific or where the content is less graphical—such as a list of search results.

To accomplish our tiled layout, we'll be using the excellent Masonry library by David DeSandro...