Highlighted

positioning multiple images on a web page

Community Beginner ,
Oct 21, 2018

Copy link to clipboard

Copied

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:  PHotographs puzzle.jpg  Thank you!

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

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

Views

204

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

positioning multiple images on a web page

Community Beginner ,
Oct 21, 2018

Copy link to clipboard

Copied

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:  PHotographs puzzle.jpg  Thank you!

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

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

Views

205

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Oct 21, 2018 0
Adobe Community Professional ,
Oct 21, 2018

Copy link to clipboard

Copied

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, ACP

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 21, 2018 2
Community Beginner ,
Oct 22, 2018

Copy link to clipboard

Copied

Thank you very much!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 22, 2018 0
Mentor ,
Oct 21, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 21, 2018 2
Community Beginner ,
Oct 22, 2018

Copy link to clipboard

Copied

THank you so much!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 22, 2018 0