I volunteered to build a Wordpress site for my company. We’re a small creative agency and normally go to freelancers when we need to build websites for clients.
I work on the business side (excel mainly), and I volunteered because I would LOVE to transition and become the main developer here.
I’ve been stuck since last week with achieving their homepage layout - https://i.imgur.com/b5YwyYVl.jpg
Originally I built it with inline-block and giving each content percentage widths – but then realize you can’t stack elements with inline-block.
Then I was told to look into grid, and that’s how it’s currently built – but it’s not showing up on Safari! or at least my work computer’s Safari. So I’m worried about browser compatibility.
I dove into masonry js and isotope, but the content gets rearranged everytime I resize the browser. When using these libraries, I used percentage widths again – so for instance, the first content on top has 56% width, and the 2nd content gets 44%.
But basically, I’m just seeking advice on how to best approach this layout, as close as possible. Should I just stick with grid, or keep trying with masonry/isotope?
Thanks in advance! and I would appreciate any feedback I can get
EDIT: I just learned about @supports for CSS. I guess I’ll use it for the grid, and use inline block as fallback for older browsers. Just for the time being. I can always go back and made changes any time.