I want to implement on our site a style like Google Plus for news feeds. Can you tell me what is this style name, or advise me on some other nice looking style?

I need to sort a lot of cards of random sizes with lazy loading. Primarily I want a style like in the picture below.

enter image description here

  • 1
    I'm not totally sure what you're asking but whatever you do, start with equal spacing between all the squares. :) – Ashlee Palka May 1 '17 at 23:06

In genreal it's called Masonry in web design. And it's done using a combination of Cascading Style Sheets (CSS) and javascript.

I've linked to one such script above (probably the most popular one), there are others however...

Here's a Sitepoint article on masonry.... Understanding Masonry Layouts

Masonry is a grid layout based on columns. Unlike other grid layouts, it doesn’t have fixed height rows. Basically, Masonry layout optimizes the use of space inside the web page by reducing any unnecessary gaps. Without this type of layout, certain restrictions are required to maintain the structure of layout.

  • Actually, thanks to CSS columns, you don't really need the JS part anymore. More info on CSS Tricks. An example is Codepen's Spark page here. Of course, lazy loading still requires the use of some JS. – PieBie May 2 '17 at 12:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.