Problem with minmax value in CSS Grid

HTML-CSS
1

Hi I’m trying to create flexible column track using

grid-template-columns: repeat(auto-fill,minmax(260px,300px));

and my intention is to create a flexible column track that can have min and max width of 260px and 300px, the problem with the above code is that all the column stuck at max value(300px) and starts wrapping. Am I missing anything?

example: https://codepen.io/mohanvadivel/full/bGEoGKx

2

I think you have to specify two different types of units. Now you’ve selected 2 times px and the browser doesn’t know which value to pick, so it picks max.
Instead, try and do (260px,1fr)

Here at MDN you see a list of possible combinations

3

hey hapiel, thank for the help :slight_smile:
But when I use (260px,1fr), the browser takes all the available space and adds it to the track, which then sets the width of the column track larger than 300px.

Is there is any way to restrict the width of the column track at particular value, provided it can also shrink upto particular value.