Image Masonry Grid in a Square Space

Question

How can I make masonry grid of only 4 images that will always look like the this?

I need this alignment to be the same on every screen size and always form a square. Is this possible? I tried a lot of different approaches and nothing seems to work for all screen sizes.

Have you checked out [CSS grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout)? — Bennett, Jul 23 '18 at 21:19
yes I tried to make it with CSS grid but I am new to this and I can't seem to make it — user2974944, Jul 23 '18 at 21:24
i did it https://codepen.io/supercica/pen/bjWezE thank you @bennett — user2974944, Jul 23 '18 at 22:58
If you were able to make it work, mark the answer below as accepted. — Bennett, Jul 24 '18 at 00:02

JoeFlash · Accepted Answer · 2018-07-24T01:06:21.130

0

Masonry is designed for dynamic layouts. You should probably use something more appropriate for a static grid, like CSS Grid.

Working from your own answer, I made a version a little more versatile. It uses the container width for the aspect ratio. Dependency on the device width can be limiting.

codepen.io/joeflash/pen/wxdomE

.grid-blocks {
  position: relative;
  margin: 0 auto;
  width: 80%;
  overflow: hidden;
}

edited Jul 24 '18 at 01:06

answered Jul 23 '18 at 23:02

JoeFlash

16
2

Yes this is great, I did the aspect ratio in my work later but I didn't update the pen. But this is better. Thank you! – user2974944 Jul 24 '18 at 05:39

Image Masonry Grid in a Square Space

1 Answers1