Dev Diary: Masonry Findings Part IV
Did you know there are different types of masonry patterns? I didn’t realize it until after finishing one, two and three* articles about masonry. From what I can tell, there’s no name for them either. For now, identifying the characteristics will help determine if JavaScript is needed.
Characteristics of the Masonry Layout
- As room becomes sparse, the rightmost column is severed from the layout. To retain some level of hierarchy, cards are repositioned via JavaScript with help from CSS, or CSS by itself using media queries.
- Art direction may change as the screen size becomes smaller, thus bypassing the need to sever columns. JavaScript may not be needed.
- Narrow viewports may have a hopscotch pattern to deal with the wider 3-column (odd numbered) masonry layouts (with horizontal hierarchy).
- If card dimensions and positions are known beforehand, JavaScript may not be necessary. (Margin-top method below. CodePen Demo)
.masonry {
position:relative;
height: 101em; /* must be set manually */
} .masonry__card {
position:absolute;
top:0; /* must be set to zero */
} .masonry__card--custom5 {
left:40%;
margin-top:132%;
width:29.347%;
}
- An alternative to the margin-top method could be CSS3 column-count but horizontal hierarchy will be lost.
- Gutters (whitespace between cards) tend to be consistent no matter the size of the device. Other times, there are no gutters. JavaScript or CSS3 column-count may be needed to keep gutters consistent on different screen sizes.
- When the design allows for gutters to scale along with the content, CSS is only needed. (The margin-top method could be chosen.)
- White space may appear on the left and right.
- For visual appeal, faux vertical gutters give the impression it has columns. Though, the visual rhythm may be more serpentine — left to right, down and then right to left.
- Cards may rise and fall or weave left to right and are not necessarily equal in size. JavaScript would work best here if horizontal hierarchy is not a concern.
*The third article was not published because it is long and confusing. I was able to get Masonry to allow horizontal hierarchy—only later to find out all of it could had been done using the margin-top method.
That’s it. I’m officially done with masonry. I hope.
Disclaimer: The Dev Diary is written every day and previous articles are not updated. Code may work today but glitches will be found tomorrow. Do your due diligence and thoroughly test any code authored here before implementing into your own project. Good luck!
