I need to implement a grid with the following features:

1) the columns width is fixed

2) the columns number depends on the window width

3) the elements has not fixed height

4) the content should be possibly vertically distributed

For now, The first two points are satisfied. I gave up on the 4th one. But I absolutely need to fix the 3rd point.

Please see this image to better understand the problem:



div.item-list { 
    width: 100%; padding: 0; margin: 10px 0;    list-style: none;

div.item-list li.views-row {
    float: left; width: 200px; /*Set default width*/ padding: 0; margin: 5px 0; display: block;

div.item-list li.views-row  div.node { 
  /* height: 755px;*/ margin-right: 10px; /*Creates the 10px gap between each column*/ padding: 20px; background: #e3e1d5; 

2 answers

Mottie 1134

Have you checked out jQuery Masonary plugin? It sounds like what you are trying to do.

Answered over 9 years ago by Mottie
  • Be warned that using JS for layout in most cases can be okay-ish, but I'd say it's rather iffy. Anthony Lemmer over 9 years ago
  • Thanks, I was looking for something just like this. Scott Burton about 9 years ago

I've solved my problem with the following script:



Answered over 9 years ago by Patrick