hi,

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:

http://dl.dropbox.com/u/72686/grid.png

CSS:

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
1
point

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

Answered almost 7 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 almost 7 years ago
  • Thanks, I was looking for something just like this. Scott Burton over 6 years ago
0
points

I've solved my problem with the following script:

http://welcome.totheinter.net/columnizer-jquery-plugin/

thanks

Answered almost 7 years ago by Patrick