Greetings!
I'm trying to figure out this layout for my webpage gallery:
I want to eliminate all white space, except for a few pixels for margin between pictures (as shown in the picture above ). The pictures vary in size.
I'm fiddling with flex box but getting lots of unwanted white space between certain photos. Is this layout possible with Grid (I have zilch experience with Grid)?
Anyone have any suggestions on where to begin?
Thank you!
Laura
I'm trying to figure out this layout for my webpage gallery:
I want to eliminate all white space, except for a few pixels for margin between pictures (as shown in the picture above ). The pictures vary in size.
I'm fiddling with flex box but getting lots of unwanted white space between certain photos. Is this layout possible with Grid (I have zilch experience with Grid)?
Anyone have any suggestions on where to begin?
Thank you!
Laura
Definitely will be able to create using grid. The white space would be created using column gap and row gap. The columns would be 1fr each but the rows would have to be varying height which would be the challenging bit. Do you have the pictures of varying heights?
Thanks for the quick reply Phil!
Yay! I’m glad to know it’s possible!
The photos are located here:
http://huttonfinebuilders.coffeecup.com/gallery.html
Yay! I’m glad to know it’s possible!
The photos are located here:
http://huttonfinebuilders.coffeecup.com/gallery.html
Yes it's possible it's just getting the varying row height to play nicely.
If you are more familiar with flex, take a look in my sharing folder (URL in signature) and check out the couple of galleries I have there. You probably have to look in the right-most column, the ones for SD3.
Ha en riktig god dag!
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Hi Laura, after having a little play and search on the internet it is possible but its really difficult as CSS grid is really for 2D grids. We could try line based placement of your images but would need a lot of try and error so get rid of the white space.
Regards
Regards
https://masonry.desandro.com/
Bootstrap 5 CSS Grid.
Inger! Your "Masonry 'Brick work' gallery" component saved me! That was exactly what I was looking for! THANK YOU!
And big thank you Phil and Twinstream for your help as well!!!
And big thank you Phil and Twinstream for your help as well!!!
Great! Glad I was able to help!
Ha en riktig god dag!
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
I'm going to have a look Inger!
Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.