Propagating a two column grid based on Aspect Ratio

[toebeeben]

How would I go about propagating a two column grid with images based on their aspect ratio?

I would assume I should go about it using CSS grid or flex but I’m not sure how. I’m looking to use it in my WordPress theme so I won’t know the image order or aspect ratio beforehand. I know that I would like landscape images to span two columns and portrait images to stay in single columns.

Here is an example of what I mean for it to look like https://i.imgur.com/HglnBeb.png

If there is an odd amount of portrait images I don’t mind there being an empty space.

Any help would be appreciated

[Paulie_D]

Sounds to me like you want a masonry solution which would require javscript.

[tomnoble92]

I’ve had to solve this problem before I used CSS Columns. https://www.w3schools.com/css/css3_multiple_columns.asp

[toebeeben]

Since I’m the only one that will be adding content to the site I guess maybe I’ll just have to just do it manually if automating it can’t be done with CSS alone. I’ve been thinking maybe I’ll just make a div for a two wide image and another for single wide images and try wrap the images in the appropriate div using PHP. It seems like this way would be more hassle but I’m using a custom WordPress theme anyway.

If I’m doing a silly approach and you know a better way please let me know. I don’t do this professionally and it seems that there isn’t exactly standard procedure for most thing in web developement.

Thank you everyone for the resources so far

[Author]

Posts