Adjust Column Width

Hello,

am moving from column-count css to this code : Codepen

I used to have
max-width: 501px : 1 Column
min-width: 502px to max-width: 890px : 2 columns
min-width: 891px to max-width: 1200px : 3 Columns
min-width: 1201px : 4 Columns

with Max column width of 400px*

How can I adjust the codepen to match the above ? P.S. Am a bit lost with the fraction.

What happens if you just try to do it with css in the normal way?

e.g.

.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
  grid-auto-rows: 20px;
}

@media screen and (min-width: 502px) {
  .grid {
    grid-template-columns: repeat(auto-fill, minmax(calc(50% - 10px), 1fr));
  }
}
@media screen and (min-width: 891px) {
  .grid {
    grid-template-columns: repeat(auto-fill, minmax(calc(33.3% - 20px), 1fr));
  }
}
@media screen and (min-width: 1201px) {
  .grid {
    grid-template-columns: repeat(auto-fill, minmax(calc(25% - 30px), 1fr));
  }
}

It seems to work on the codepen unless its breaking something I didn’t notice.

2 Likes

Thank you so much ! It works great !

1 Like

The reason I decided to move to this script is because the old code based on pure CSS was sorting the items in columns. URL here: Live website
i.e.

1  4  7
2  5  8
3  6  9

With grid CSS (thanks for your help) & JS, the items will appear in the correct order now.
URL here : Dev Website
i.e:

1  2  3
4  5  6
7  8  9

However Only when I load another JS to “Lazy load” the images, it will add extra height so the items making all of them of the same height. Without this “Lazy load” JS it will work great.

Any hint about what’s happening ?

Yes probably a question for the JS gurus around here rather than me :slight_smile:

At a guess I would say that your masonry and images loaded is using the data images that you are supplying as they are loaded first and using their dimensions to lay out the page resulting in everything being the same. Maybe if your data images were the correct aspect ratio for each image (and had the correct width and height attributes added) then it would work but that’s just a guess I’m afraid.

Seems to be a similar problem here.

Thanks PaulOB, thanks for the link but however am lost in the explanations. Do you think I should repost this issue somewhere here but in another category ?

You should probably post a new thread but keep it in JS as this thread was concerned about the column widths but now the question is a bout lazy load and ImagesLoaded scripts working together. :slight_smile:

2 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.