Masonry Grid for Any Content

  • macksix

    (@macksix)


    5 years, 8 months ago

    I am looking for a way to display a Masonry Grid on a WordPress page, but so that the blocks can contain any sort of content I wish. If I want to put in a shortcode in a block, it displays whatever the shortcode provides. This is my main desire, but if I can put any sort HTML in it, that would be awesome too.

    I would need the grid to maintain an order of left to right, with left being the newer than the right. If it has ways to sort different ways, that would be awesome too. This would need to be responsive so that if I have 4 columns it will resize down as the screen width gets smaller at certain points, so it goes from 4 to 3 (or to 2) and then 2 to 1 as the screen gets down to phone sizes.

    This can be done in Divi builder code or text modules added in columns, but then the sorting is not preserved once columns start stacking as screen width gets smaller.

    Would love to find something that does what I need.

Viewing 2 replies - 1 through 2 (of 2 total)
  • Joy

    (@joyously)

    5 years, 8 months ago

    I wonder about your use of the term “Masonry Grid”. The Masonry script only works with images because it resizes them and uses absolute positioning to get the “bricked” look of offset tops. Text resizes also, but not the same way that images do, and “any HTML” would include tables and lists and videos and iframes, which don’t resize well at all.

    You can work out the fairly simple CSS to make a container look like columns (width of 30% makes 3 to a row), and media queries to make it change when the screen size changes. You then have to use that container class on your content, or style the existing containers instead.
    The CSS can be flex or inline-block or using the justify trick or using columns (but that reads down and then across so you don’t want that) or involving more elaborate calculation so a script like Masonry would be needed.

    Thread Starter macksix

    (@macksix)

    5 years, 8 months ago

    Metafizzy’s isotope javascript plugin does it.

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Masonry Grid for Any Content’ is closed to new replies.