1

I've found a workable CSS-only photo-grid:

https://css-tricks.com/seamless-responsive-photo-grid/

But the fill is vertical; that is, photo #2 is underneath photo #1 in the same column, rather than to the right of it. What I want is horizontal flow.

I can do this easily with JavaScript, but is there a way to do it with pure CSS?

Requirements:

  1. Wrapping must be automatic; I don't want to assign photos to rows.
  2. Left and right justification. The height of a row varies so that the photos in that row are flush to the left and right margins of the container.

  3. The HTML should be extremely simple, something like this:

    <div class='photo-container'>
    <img src='...'>
    <img src='...'>
    <img src='...'>
    ...
    </div>

  4. Aspect ratio of photos must be maintained. [UPDATE]

Any ideas?

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Marc Rochkind
  • 3,678
  • 3
  • 30
  • 38
  • Not with pure CSS. As you've said, you need to use JS for this. – disinfor Nov 18 '17 at 20:01
  • 1
    @disinfor i don't agree. Actually with flex or grid-column and media queries you are able to do such things even if sometimes you have to write some complicated code. – Temani Afif Nov 18 '17 at 20:04
  • No, there the JS is not needed. It is possible in pure CSS. – 18C Nov 18 '17 at 20:10
  • Then show an example! I would love to be proven wrong on this..would make life much easier. – disinfor Nov 18 '17 at 20:11
  • @disinfor simply check my anwser, i have tried something similar to what OP wants with few CSS property (that need to be improved of course) – Temani Afif Nov 18 '17 at 20:12
  • No it's not. Click on the OPs example. It's a seemless masonry type grid with varying heights of images. The issue that OP is having, is that CSS Grid wraps in columns first (so vertical), where OP wants to run left to right, then fill in the vertical gaps with the next row. – disinfor Nov 18 '17 at 20:14
  • @disinfor: Do you want to post your comment as an answer, so I can check it? Or, maybe leave this open until someone comes up with something, perhaps with new CSS features that come our way in the future? – Marc Rochkind Nov 19 '17 at 16:23
  • @MarcRochkind Despite wanting sweet SO reputation, I'd rather leave this one open and not necessarily have an answer that is "nope, you need JS". I'm hoping that in the future, your question will be answered by a CSS only solution. – disinfor Nov 19 '17 at 23:23

0 Answers0