css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
user profile image

CSS Grid Layout as masonry with 'grid-auto-flow: dense'.

Look at number of pics and the empty spaces inside grid when initial/dense value changes

Here is a v2 with lazy-load images https://escss.blogspot.com/2017/07/css-grid-layout-as-masonry.html

Here is another version: a case study: Latest post of a blog
The titles & font sizes help to diversify the size of each area


  1. It's worth noting that CSS Grid currently does not support the type of masonry layout that is associated with this term, since you still have to define a row span for the grid items, at least for the larger ones.

  2. Yes, of course, you're right, @simevidas .

    But I, who am not a native English speaker, believed, in my ignorance, that by saying in the title "as masonry" it would be clear that I do not say that it is "a masonry layout".

    Ah! By the way, maybe you may be interested in what the developer of the masonry layout (Dave DeSandro) thinks about this pen



  3. Technically, there is no formal definition of what a masonry layout is -- at least I couldn't find one -- so anything that "fills in the gaps" can be considered masonry, even if it requires additional code.

    I wasn't fully aware of the difference between CSS Grid's dense mode and the "common masonry layout" earlier (when I was researching this topic yesterday), so I just wanted to point it out, now that I think I've figured it out :)

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.