The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] problem with filtering the content of css columns

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
  • #180118

    Hello all,
    I’ve got a problem on my portfolio site

    For the starting page I use a column-count based layout with 4 columns at desktop size to present my work and they can be filtered according to categories via the filtering blocks script ( from CSSTricks, which works as it should.

    But the selected elements stay inside the column they were in originally, instead of jumping to the next column when that column is empty. What I mean is, when, for example, I filter by Logodesigns, the two items selected stay in the first column instead of occupying two columns next to each other. Same goes for other filters.

    Mostly this happens in Chrome, Firefox does a little better, but there are also inconsistencies.

    Does anyone know of a way to reset the column-count after the jQuery function is fired, or reorder the elements inside the columns and force them back into a 4 column layout?

    I love the coulmn-count function and would rather stay with it than resort to a grid-plugin like masonry, so any help is greatly appreciated…


    Thank you, I’ll try it out and report back


    Sorry, but I can’t get it to work. The columns are still misbehaving no matter how often I tell them to split into four.

    Could this be happening because I’m filling the columns dynamically via a php script?


    Thank you for taking the time and effort to help me. If I understand your example correctly, when the filter is clicked you basically turn the divs into floats and replace/imitate the non-working column-count rule, right?

    I had originally tried having the images all the same height by giving the li-elements a fixed height and the result wasn’t bad, but the images were usually cut off at rather unfortunate places and made it look like some of them were empty/blank…

    I think your solution works pretty well. The gaps are, of course, annoying but I could live with them. It does break the flow of the grid somewhat. Maybe Masonry is the best solution in this case. I had hoped I could find a pure CSS solution but it seems column-count still has some pitfalls…

    I know perfect is most often the wrong way to go, especially time wise. I’m just kinda bummed out that the column count solution for the grid looked perfect in the beginning and that something so simple as the filter could break it so stupidly…

    The real problem is that I don’t understand why it is doing it the way it is doing. I’m alright with implementing an alternative like your float-solution or Masonry for the live site, but I’m probably still gonna test around and fiddle with the column-count grid until I get why it is behaving this way.

    Thank you again for your help and your solution, I’ll try and see how it looks with Masonry. Otherwise, your solution seems to be the best for now :)


    but my guess is that the reason is that the hidden list-items are still in the ( so-called ) DOM,

    Essentially, I think this is correct.


    I’ll try taking out the hidden lists and see what happens…


    Tested it here

    but no luck so far. The columns still behave the same, even though there are no hidden elements anymore, just simple list items.

    Could this be connected to the way the browsers fill the columns? What I mean is, when you filter by webdesign, Chrome gives me three columns (filled 2 2 1, I assume the last one is there but empty) and Firefox gives me 4 columns but they are filled 1 1 2 1, even though there are 5 elements, which should result in four columns filled 2 1 1 1.

    Maybe the browser is trying to equalize the heights of the different columns and in doing so leaves the last empty?

    If you change the column count after filtering with the dev tools, it will behave correctly when you specify 2 or 3 columns, but everything above that and the last columns will be empty. When I set the column-count to 5 for example, it gave me 2 filled columns. Both had a small enough width that there would have easily fit all five columns next to each other, so I’m assuming the other three columns are there but empty.

Viewing 7 posts - 1 through 7 (of 7 total)
  • The forum ‘CSS’ is closed to new topics and replies.