CODEWITHSUNDEEP
csssassgrid-layout
joshmath
joshmath

Reputation: 158

How do I keep images the same height/width when displaying them in a row in a responsive grid?

I have a %-based grid with a fixed-width (for the moment). The code is based off of this css-tricks article: http://css-tricks.com/dont-overthink-it-grids/

Works great until I have a column that has multiple responsive images in it that are the same size and need to be stacked next to each other (floated). Because of padding issues and what-not, I can not get all three images to come out the same width and height, despite the fact that they start that way. The last one is always taller. Here is a codepen showing the issue: http://codepen.io/joshmath/pen/dEuIv

Any help with this would be really appreciated. I've run into this issue before and always just end up hacking my way through it on a case-by-case basis. Thanks!

Upvotes: 0

Views: 1188

Answers (2)

Dylan Hayes
Dylan Hayes

Reputation: 2366

just add the following to your css. set the size to whatever you like and all images within your grid will remain that size, if they need to grow / shrink use height/width percents instead.

.grid img { width: 350px; height: 400px; }

Upvotes: 0

seannachie
seannachie

Reputation: 137

For whatever reason, if you remove the padding-right: 0 style from the last element, it fixes the issue.

It looks like you're trying to add spacing between the elements using padding. What I tried instead using the Chrome dev tools was to use a margin instead of padding, and then slightly reducing the width of your elements to around 29.5%. That seemed to work.

Upvotes: 1

Related Questions