17 replies

How to set a max track size on repeat(auto-fit , minmax(120px, 1fr))

✅solved

front-end

My grid can have

items. I want my grid track to be between 120 and 150px but the items should also grow/shrink so no extra space is left at the end of the grid.

I have tried using this

repeat(auto-fit , minmax(120px, 150px))

repeat(auto-fit , minmax(120px, 150px))

but it's too strict as you can see in the first image. It leaves extra space at the end when it doesn't have the required 120px.

Then I tried

repeat(auto-fit , minmax(120px, 1fr))

repeat(auto-fit , minmax(120px, 1fr))

and it did what I wanted as you can see in image (2) but the problem is, when n is small or viewport is too large, the images also get too large because of the 1fr.

I want something that combines

minmax(120px, 1fr)

minmax(120px, 1fr)

and

minmax(120px, 150px)

minmax(120px, 150px)

but I'm not sure what could help. I thought maybe I can put a max width on the container but that won't work when

1<n<3

1<n<3

.

Is flexbox the right solution to this problem perhaps? Although I do want every column and row to be the same size which I don't think flexbox is capable of doing.

KP-C

Kevin Powell - Community•7d ago•

17 replies

WhatWhereWhen?

How to set a max track size on repeat(auto-fit , minmax(120px, 1fr))

✅solved

front-end

My grid can have

items. I want my grid track to be between 120 and 150px but the items should also grow/shrink so no extra space is left at the end of the grid.

I have tried using this

repeat(auto-fit , minmax(120px, 150px))

repeat(auto-fit , minmax(120px, 150px))

but it's too strict as you can see in the first image. It leaves extra space at the end when it doesn't have the required 120px.

Then I tried

repeat(auto-fit , minmax(120px, 1fr))

repeat(auto-fit , minmax(120px, 1fr))

and it did what I wanted as you can see in image (2) but the problem is, when n is small or viewport is too large, the images also get too large because of the 1fr.

I want something that combines

minmax(120px, 1fr)

minmax(120px, 1fr)

and

minmax(120px, 150px)

minmax(120px, 150px)

but I'm not sure what could help. I thought maybe I can put a max width on the container but that won't work when

1<n<3

1<n<3

.

Is flexbox the right solution to this problem perhaps? Although I do want every column and row to be the same size which I don't think flexbox is capable of doing.

How to set a max track size on repeat(auto-fit , minmax(120px, 1fr))

Similar Threads

How to set a max track size on repeat(auto-fit , minmax(120px, 1fr))

Similar Threads

Similar Threads

Similar Threads