Masonry Grid with textoverlay

Design help General
1

Hi,
I am just new at webflow.

I have watched countless YouTube videos and read some tutorials here on the forum. But I can’t find a reasonable solution for my goal:

  • Masonry grid with different images that are linked to their respective subpages (customer projects).
  • The grid should adjust based on the screen size, so that, for example, on desktops, 3 rows are visible, but on smartphones, only one row. => I have recently achieved this using the “Columns” trick under typography.
  • Each image should always display a heading and a subheadline at the bottom left.

So, in the end, it should actually look exactly like this: https://www.jacobmedia.com/

I’m not yet proficient enough in reading code to apply it to my test website.

Can you provide me with some assistance?

I’m very grateful for any help!

Best regards, Tim

Here is my site Read-Only: Webflow - Crastulo

2

Sounds like you’re on the right track. If you’re all good with the items running down-than-across, than the columns approach is ideal.

Your “cards” will simply be designed to contain your image, and then overlaid, your text.

To keep the cards from breaking across columns you’ll need a small piece of custom CSS to apply the column-break-inside: avoid; style.

3

Sounds great. Thank you.

But can you explain to me why on mobile these two headings (heading, subheading) are reversed? On the desktop and ipad they are correct.

4

You have a top margin on your text that is moving it out of the flow position.

Read up on relative and absolute positioning. Because your photos are varying aspect ratios, you will want to make use of relative and absolute positioning in your card design, so that your titles can position correctly whatever the image size is.

Also, if you’re using the CMS, I’d store the photos and their titles there. It will make designing this section far easier.

5

Thank you very much!
I think I got it. For me it looks ok.

CMS is planned for the future. But was not desired due to the costs.

6

Hi,
do you have an idea why some images are wider?
https://preview.webflow.com/preview/crastulo?utm_medium=preview_link&utm_source=designer&utm_content=crastulo&preview=c8cabebff3a3baa5921cc2f88818b090&workflow=preview

Image size
Image size1582×1074 154 KB

I think its something about the divs?

Thank you very much!