Masonry grid with equal gap size

[sirfrancis]

Dear Pro-team,

I am just experimenting with the new grid-element, but cannot find a way to achieve this:
I want to create a masonry grid with 2 columns with a fixed width, where all items have a different height. The items consist of an image and some text, similar to the classic promo element or a blog post.

The fixed width is clear, the problem is, that the following row begins always below the highest item above (and a defined gap between), even when the item of one column is much shorter.

However all items of one column should always be aligned to the upper item depending on its real content, not depending on the height of the longest item in the row above, so there is always the same gap size between the text of the upper item and the image of the item below.

Is this possible with the new grid element?

Thank you in advance for your answer.

Franz

[kory]

Howdy @sirfrancis, thanks for writing in!

If I’m understanding what you’re trying to accomplish here, this particular type of layout is not possible with CSS Grid. This is due to the fact that CSS Grid is a two dimensional system, meaning that there are always relationships formed between the row and column layouts of the “cells” inside the grid. What you’re describing of the following line always beginning below the tallest item in the line above is due to this two dimensional layout system. We cover much of this and the basics of understanding how CSS Grids work in this video on our YouTube channel:

Now, there are some possibilities to achieving a “masonry” type element in CSS Grid, but there are limitations to it (such as items having to match certain dimensions). We discuss the possibilities of masonry layouts with CSS Grid in another video on our channel that might be worth checking out:

Something you could explore is taking the idea from that video and perhaps creating multiple “sizes” of cells inside the grid. For example, you could have some that only span a few rows, while others span more. This would give the appearance of a more traditional “masonry” type layout with cells differing in height, but they’re ultimately still aligning to the overall grid.

Hopefully that helps to point you in the right direction and give you some ideas moving forward. Cheers!