2

I am working on the the following, Wordpress-based web project: http://udkdev.skopec.de/category/projekte/

As you can see, there is a grid for the post/the post thumbnails. Someone else has set this up under the premise that all thumbnails will be the same height. I would like to change it so that the thumbnails can have varying heights and wrap properly, without creating wholes between the rows in which the images are lined up. Can I do that by altering the current version or do I have to set up a completely new approach for the grid?

JoSch
  • 869
  • 1
  • 15
  • 35
  • 2
    Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a **Stack Snippet**. Although you have provided a link, if it was to become invalid, your question would be of no value to other future SO users with the same problem. See [**Something in my website doesn't work can I just paste a link**](http://meta.stackoverflow.com/questions/254428/something-in-my-web-site-or-project-doesnt-work-can-i-just-paste-a-link-to-it). – Paulie_D Aug 16 '17 at 10:11
  • this is possible to do without JS plugins mentioned, see answer below –  Aug 16 '17 at 10:20

3 Answers3

1

This is only possible with javascript not with CSS only. You need something like "Masonry" (https://masonry.desandro.com/).

herrfischer
  • 1,768
  • 2
  • 22
  • 35
0

You can simply fix this with CSS only you need to set fixed height to the images and add property object-fit:cover now the images will be same height. or you need different height images then you need to use some js plugins like https://isotope.metafizzy.co/layout-modes/masonry.html

.wrapper-projekte .post img {
   height: 260px;
   object-fit: cover;
   width: 100%;
}

enter image description here

Jishnu V S
  • 8,164
  • 7
  • 27
  • 57
  • 1
    he wants images to have variable height rather than stretch to fit a fixed one –  Aug 16 '17 at 09:56
  • But that would set a universal height for all images, I want the images to be able to have varying heights – JoSch Aug 16 '17 at 09:57
  • 1
    @JoSch then you need to use something like this plugin https://isotope.metafizzy.co/layout-modes/masonry.html – Jishnu V S Aug 16 '17 at 10:03
0

You can divide the content into three column divs and use min-width so they drop down to that single column when the window is narrower than ~850px like it does.

Here's an example of what I mean:

https://jsfiddle.net/g6a4vprb/2/

CSS is as follows:

.column  {
  width: 30%;
  min-width: 270px; /* put this in a media query (shown in fiddle link above) */
  float: left;
  margin: 0 1%;
}

.column img {
  width: 100%;
}