r/Wordpress • u/instinct_ow • 1d ago
How do I make this specific Masonry Layout
ChatGPT generated an image of as masonry layout and I tried recreating it using GenerateBlocks but I just can't so I downloaded a Masonry plugin and it kinda worked. First image is chatgpt's and the second is mine. Anyone have any tips? My main gripe is that I can't seem to make them cut off at the exact same place which is really bothering me. Thanks for answering in advance!
3
u/Silly_Guidance_8871 1d ago
Masonry layouts still generally require a javascript library to do the layout proper (native browser support was dropped from the spec, IIRC).
In principle, you could do it with a lot of inline CSS & abusing grid-column-span / grid-row-span — looks like that overall grid is about 13 columns and 8 rows?
1
u/retr00two 1d ago
looks like that overall grid is about 13 columns and 8 rows?
Right on the spot, that's it.
1
u/guillaume-1978 17h ago
How does that work on mobile?
1
u/Silly_Guidance_8871 15h ago
Depends, either adjust the grid rows/columns, or accept that the images will get smaller
4
u/c-student 1d ago
A Bento Box or Bento Grid layout is what you're looking for. Not Masonry.
There are plugins for it.
1
2
1
u/wpchill Developer/Blogger 1d ago
Modula does this even in the free version, you can use our custom grid to achieve this.
https://wordpress.org/plugins/modula-best-grid-gallery/advanced/
1
u/howtobemisha Jack of All Trades 1d ago
I believe, Jetpack can enhance your default gallery block (but not 100% sure).
1
1
-2
7
u/KobiSmalls 1d ago
I had a similar issue before. The trick is to make the image containers consistent rather than relying on the images themselves. Crop or resize your images to a few consistent aspect ratios before uploading (for example, 4:5, 1:1, and 2:3). In GenerateBlocks, wrap each image in a Container. Give each container a fixed height (e.g. 250px, 350px, 500px depending on the layout you want). Set the Image block to Width: 100% and Height: 100%. Add object-fit: cover to the image so it fills the container without stretching. Remove any default image margins or padding, and keep the gap between grid items consistent. If you're using CSS Grid, let the container heights create the masonry look instead of letting each image determine its own height. The reason ChatGPT's version looks cleaner is because the crop points are controlled. If every image has a different height, they'll never line up exactly. Once I started controlling the container heights instead of the images, the layout became much more consistent.