Fix grid layout in CSS3

I'm building a website to showcase some projects I've created. I'm definitely more of a back-end person and so CSS/CSS3 is a little bit hard for me to grasp which is why I'm using [login to view URL] I have a grid of images that looks like ``` | . . . . . . . ``` The . represent an image of one size The | represents an image of another size. The size of the . is 364x307 The size of the | is 360x640 I would like for the grid of images to look like ``` | . . . . . . . ``` I've downloaded a template online and heavily modified it to look a bit different. I've looked through all of materialize to try to see if anything that's flexible? The only thing that seems to kinda work is if I make the width of all the images smaller, then I'm able to make it look like ``` | : : : ``` Which would be great except I want it vertically. Even though the template is heavily modified you can try it out on here [login to view URL] Now, if you right click and inspect element one of the images, and change the src to any image who's aspect ratio is 16:9 you'll see the issue I'm talking about. Here's an example image you can use to replace the current one with [login to view URL] The dream is for it to look like ``` | . . . . . . . ``` Any help is much appreciate! Thanks!