Inspired by Masonry, and similar to Packery (both by desandro), Mosaic is great for mixing dynamic and static content in the same layout. Like Packery, you can specify tiles that you want to essentially keep the same position. Unlike Packery, your positioned tiles are positioned relative to the grid you're using, and so is already entirely integrated into your layout.
Mosaic comes with two libraries: a CSS library and a JS library.
MosaicCSS creates a grid framework based on columns and rows. The column width and row height will be the same, and this will be enforced using padding-bottom for the row height (meaning the height of the tiles will be a percentage of the width instead of the height of the container). A normal tile, then, will be a square spanning one column and one row, but it's easy to make the rowspan or column span different.
MosaicJS lays out the grid so that everything fits together, instead of stacking elements of odd heights and widths with gaps in between. In addition, allows you to specify positions for your tiles within the grid, and will make all the necessary calculations for you. Also allows for breakpoints and other options.
Masonry positions your elements the way it thinks is best, without your input. Resize the window and follow the element with the words "Where am I?". There are no options to control its position, so who knows where it will go?
For an example, check out the title section! When you resize the page, it moves exactly where it needs to go to ensure the title is in an optimal viewing position.