Image Gallery in Grid

[JoniGiuro]

Hi, I’m about to start programming my nth thousand image gallery page in html/css.

It’s build like the most common gallery ever: a lot of pictures, one next to each other (4 on each row). They’re all the same width and height.

What I usually do, is give each image a width and a height and a margin-right, then, every “n” pictures I add a class “new-row” and remove the margin-right. That way, each row will be perfectly aligned with the container (left and right).

I wanted to know if there is a way to not use an additional class or css rule (so no nth.child) and achieve the same result.

Thanks

Jonas

[Paulie_D]

Because of this

>They’re all the same width and height.

This feels wrong.

>I give each image a width and a height

If we could see a Codepen of the way you are doing it now we could offer alternatives.

[jurotek]

Don’t put padding on container and use margin left and bottom. That way no nth.child or .last needed.

[JoniGiuro]

With that I mean I just add to the class .single-thumb a width and a height

[JoniGiuro]

@jurotek the problem is that the first image and the last touch the border of the container

[jurotek]

Why does it have to align with edges of container?

[JoniGiuro]

because the graphic designer said so

[Kitty Giraudel]

Could you please make a demo we can tweak? :)

[Paulie_D]

Erm….http://codepen.io/Paulie-D/pen/lyCED

[JoniGiuro]

I have no demo, it’s just something I did a lot of times and now I thought “what the heck?”.

@ Paulie_D this seems to work but you have a little bit of padding on the left of the first image and on the right of the fourth. I want them to touch the border

[Kitty Giraudel]

Change `padding: .5%` to `padding: .5% 0`.

[Paulie_D]

>this seems to work but you have a little bit of padding on the left of the first image and on the right of the fourth. I want them to touch the border

Picky aren’t you?

if you need to differentiate between one image and another then the old `’:nth-` is going to come into play I suspect.

[Kitty Giraudel]

http://jsfiddle.net/rUkqZ/4/

[Paulie_D]

@HugoGiraudel

It’s OK **:)** but I dislike hard (px) numbers.

[JoniGiuro]

Yeah I know I’m picky. It’s just that this is something that we always have to deal with in our job, so I want to be sure I’m doing it in the best way:
Don’t want to use nth-child because it’s not supported in ie8.

@Hugo http://jsfiddle.net/jonigiuro/rUkqZ/3/ you’re having a default spacing between images because of the inline-block thing. I want to be able to decide the width of the gutter.

I guess the good old .no-margin thing would still be the best thing

[Author]

Posts