positioning multiple images on a web page

Question

Hi,I'm trying to figure out the best way to position multiple pictures on a web page.  I was able to position in html, but think I should be using CSS.  Can anyone tell me the best way to do this using CSS?  Here is my photoshop template:    Thank you!

Nancy OShea · Accepted Answer

Looks like a Masonry style grid to me. I did something similar with Bootstrap and CSS Flexbox below. You would need to change the body background color and add some additional white space between images. View source to see the code.

Alt-Web Demo :: Responsive Masonry Gallery

ALsp · Answer

True masonry grids are impossible to do with CSS. There are a number of hacks, but they all eventually fall short. That's not to mention the obvious usability issues if your visitors happen to be humans, who tend to read from left to right

Here are some ways you can "grid up" mixed ratio images without the bloat of Bootstrap plus jQuery, using Dreamweaver extensions:

Flex Grid Magic:

FGM - MBX

Harmony mixed structure:

Gadzooks 08

Harmony mixed grid:

PVII Harmonium 06