CSS Grid – Making elements grow (responsive)?

[giantqtipz]

Hi guys,

New member here.

I’m trying to achieve this layout for a WordPress project I’m working on:

https://imgur.com/a/gNTjodj

Originally I tried it with inline-block, but I couldn’t bring the elements closer as in the layout. So I decided to dive into grid this past weekend, and this is where I’m at.

http://www.palessie.com

I’m not sure if I’m doing this right, but basically I created rows, columns, and manually assigning column and row spans for each element. The issue is, the content do not scale, especially on larger screens.

I was wondering how I can get the elements to scale as I resize the browser, with grid?

And I also noticed that I guess grid doesn’t work on safari? How would I include a fallback? Can I have display inline-block and grid on the same element?

Thanks in advance, and looking forward to your thoughts and insight!

[giantqtipz]

sorry, I meant, how do I maintain a certain proportion of columns and widths? so that when you resize, it maintains the same proportion.

** I would edit my post, but over the weekend, editing my post deletes the post altogether, and I’m afraid of having to retype everything :S

[Paulie_D]

We’d need a minimal code Demo ideally in Codepen.io to assist you properly.

Trying to fix things using only Developer Tools at a link is probably more than most are willing to do.

My first impression though, from a quick glance at the layout image, is that this is not a grid.

It doesn’t seem to have regular set columns or rows of equal width/height. It looks more like a masonry layout and these are usually the realm of javascript.

[giantqtipz]

Hey!

Sorry about that — here is the codepen. I tried to replicate what I have currently on the site which is setup with grid.

https://codepen.io/giantqtipz/pen/LBZLVP

I did play around with isotope, and after some messing around, I managed to get close to the layout — however, as soon as I resize the browser, the content gets rearranged, and I can’t for the life of me figure out how to prevent it.

If I use masonry, I use inline-block, and set percentage widths to each image. Not sure if that’s the right approach.

Would you say it’s definitely possible to get the layout exactly with masonry, and it’s the best solution for this? Also the images don’t have a fixed height. The widths are percentages, which I think most of the problem lies? I don’t have a good concept of how much should content stretch by. What is the appropriate maximum width/height for content to grow?

Thanks again!

I will try to replicate the masonry one with inline-block in codepen when I get home.

edit: wanted to add that what I did differently this time is I used span to stretch the columns and widths. But I’m still not sure if grid is the right solution because I can’t even get it to display on Safari…

[Author]

Posts