Adding intro to Masonry blog post #357
Open
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| From a technical standpoint, we’re adding the next item to the shortest column iteratively. | ||
| Behind the scenes, masonry js-library can do one of the following - Change the actual order of HTML elements; change the visual layout using CSS transition feature but keep the HTML elements at their original order. When deciding between the two, you should take keyboard-navigation into consideration: When the user hit “next” on the keyboard, where should the focus go? | ||
|
|
||
| The next step beyond standard masonry is both widths and heights are different sizes. The algorithm becomes far more complicated - it’s no longer adding an item to the shortest column as the previous libraries did, rather trying to fit each element wherever possible, but of course there’s no need to re-invent the wheel - the problem is called “rectangle-packing” and there are ready made libraries for it. |
There was a problem hiding this comment.
Can you suggest some rectangle-packing libraries?
There was a problem hiding this comment.
realised I forgot to paste all the links I had....
csalt-scottlogic
requested changes
Sep 15, 2025
|
|
||
| <img src="{{ site.baseurl }}/osharon/assets/intro-to-masonry/pinterest.jpg" alt="Pinterest signature masonry layout"/> | ||
|
|
||
| From a designer's point of view, my colleague Marcin Palmaka argues that layouts should adhere to certain typography rules. i.e., the weight of the container and columns should derive from your font size, and your gutters should relate to your baseline (font size * line height). For additional information on that aspect, he recommends the book - [Grid systems in graphic design - Josef Muller-Brockmann](https://monoskop.org/images/a/a4/Mueller-Brockmann_Josef_Grid_Systems_in_Graphic_Design_Raster_Systeme_fuer_die_Visuele_Gestaltung_English_German_no_OCR.pdf). |
There was a problem hiding this comment.
Does Marcin have a profile (eg LinkedIn) that you could link to here?
|
|
||
| From a designer's point of view, my colleague Marcin Palmaka argues that layouts should adhere to certain typography rules. i.e., the weight of the container and columns should derive from your font size, and your gutters should relate to your baseline (font size * line height). For additional information on that aspect, he recommends the book - [Grid systems in graphic design - Josef Muller-Brockmann](https://monoskop.org/images/a/a4/Mueller-Brockmann_Josef_Grid_Systems_in_Graphic_Design_Raster_Systeme_fuer_die_Visuele_Gestaltung_English_German_no_OCR.pdf). | ||
|
|
||
| The big challenge in masony layout is that the items are ordered horizontally while stacked vertically - if there were only 5 items, we would expect them fill a single row (and not be stacked in a single vertical column). |
There was a problem hiding this comment.
Typo, should start "The big challenge in masonry layout"
|
|
||
| <img src="{{ site.baseurl }}/osharon/assets/intro-to-masonry/fixed-layout.png" alt="Fixed layout"/> | ||
|
|
||
| This layout is also called "[bento box](https://bentogrids.com/)", and it was inspired from Microsoft Windows-7 [Metro design](https://en.wikipedia.org/wiki/Metro_(design_language)). |
There was a problem hiding this comment.
"Windows 7" shouldn't be hyphenated
| If you’re not into reinventing the wheel, there are JS-based [libraries](https://spope.github.io/MiniMasonry.js/) [such](https://isotope.metafizzy.co/layout-modes/masonry) [as](https://getbootstrap.com/docs/5.1/examples/masonry/) [Masonry.js](https://masonry.desandro.com/). | ||
| Alternatively, you can use the new CSS feature grid-template-rows: masonry;. The only problem with it is that it’s only available on Firefox and [must be explicitly enabled](https://www.stefanjudis.com/blog/how-to-use-and-feature-detect-css-grid-masonry-layout/). The feature has been available in Firefox since 2020 but it's still not commonly used. | ||
|
|
||
| ``` |
There was a problem hiding this comment.
Change this (and line 52) to ~~~ for it to format properly, the formatting is broken at the moment. I think you can also change this line to ~~~ css to get syntax colouring. This is one place where our blog differs from "normal" Markdown
| </tr></table> | ||
|
|
||
| From a technical standpoint, we’re adding the next item to the shortest column iteratively. | ||
| Behind the scenes, masonry js-library can do one of the following - Change the actual order of HTML elements; change the visual layout using CSS transition feature but keep the HTML elements at their original order. When deciding between the two, you should take keyboard-navigation into consideration: When the user hit “next” on the keyboard, where should the focus go? |
There was a problem hiding this comment.
I'd change the start of this to "Behind the scenes, the masonry.js library" and I'd be tempted to put the two possibilities as bullet points
|
|
||
| ## So, what are the takeaways? | ||
| For anything static, avoid overcomplicated code. Use a css-grid generator to set the layout. | ||
| For dynamic items of various heights (or width, just as long as one of the dimensions is fixed), use an existing library of masonry-js. Internally you can rely on Firefox feature but avoid it for public use. |
There was a problem hiding this comment.
I feel like this could do with rewording a little. I'd say "use the existing library masonry.js" and "If you're in a controlled environment where you can ensure everyone is using Firefox"
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Please add a direct link to your post here:
https://osharon-scottlogic.github.io/blog/2025/09/01/intro-to-masonry.html
Have you (please tick each box to show completion):
npm installfollowed bynpx mdspell "**/{FILE_NAME}.md" --en-gb -a -n -x -tif that's your thing)Posts are reviewed / approved by your Regional Tech Lead.