Guidance

I'll be honest, I love Wordpress for everything, so I'm going to go ahead and recommend building a theme for something like this, but as far as the layout:

The layout seems like its got each of the boxes having set widths and heights, not percentages, and all the elements have the block layout, because when you resize the browser they jump below one another.

I'd say set a pixel width on the blocks, and use a php function that basically just says for each item I have under this post type, make the block look like this, and float them left, that way you'll get them all lined up nicely.

I'm not sure if this helped at all but these are a few things that struck me when I say the webpage.

Hello Rashii

I think your starting point would be to use CSS media queries to define the amount of "image boxes" that should be displayed. So basically something like the snippet below where each .box contains an image (of course you could also have it display more than three boxes by adding an additional breakpoint). I've used this approach in the past for a layout which was very similar to what you want to achieve...

@media only screen and (max-width : 480px) {
/* Smartphones: 1 image per row */
.box {
  width: 100%;
}
}
@media only screen and (max-width : 650px) and (min-width : 481px) {
/* Tablets: 2 images per row */
.box {
  width: 50%;
}
}
@media only screen and (min-width : 651px) {
/* large screens: 3 images per row */
.box {
  width: 33.3%;
}
}