- This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
Viewing 3 posts - 1 through 3 (of 3 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
So, I was looking at [this](https://css-tricks.com/seamless-responsive-photo-grid/ “this”) article on CSS Tricks and was wondering if there was a way to have this photo grid display images from left to right instead of an unnatural top to bottom.
[Someone](https://css-tricks.com/seamless-responsive-photo-grid/#comment-101108 “”) mentioned it in the comments, but they didn’t receive a response.
Any ideas how to fix this?
Thanks in advance.
it looks like the grid is based on utilizing [CSS3 columns](http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/an-introduction-to-the-css3-multiple-column-layout-module/), so you’d need to remove all that styling and possibly try replacing it with a ‘float:left’ + a set height on ‘#photos img’.
i’m sure there’s a better way to do it but that was the quickest idea that came to mind. one definite shortcoming to doing it like this vs loading the images in columns is the image row’s are all a different width based on the widths of the images you’re loading.
it would be fine if all the images were the same size though, perhaps thumbnails that load the full size image on click.
Yeah the Gallery grid on here is CSS colums based. There is always [JQuery masonry](http://masonry.desandro.com/) – I’m using this on my personal site – [Codeboxers CodeWall](http://codeboxers.com/code-wall/) to pull off a nice tiled effect.