Skip to main content
Participating Frequently
October 21, 2018
Answered

positioning multiple images on a web page

  • October 21, 2018
  • 2 replies
  • 666 views

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!

    This topic has been closed for replies.
    Correct answer Nancy OShea

    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

    2 replies

    ALsp
    Legend
    October 22, 2018

    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

    Participating Frequently
    October 22, 2018

    THank you so much!

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity ExpertCorrect answer
    Community Expert
    October 21, 2018

    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

    Nancy O'Shea— Product User & Community Expert
    Participating Frequently
    October 22, 2018

    Thank you very much!